Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@myuw-web-components/myuw-app-bar

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@myuw-web-components/myuw-app-bar

Top app bar based on Material guidelines and the UW-Madison app style guide, developed with Polymer 3

0.2.0
Source
npm

Version published: 7 years ago

Weekly downloads: 660; increased by17.44%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

<myuw-app-bar>

top bar image

Top app bar based on Material guidelines and the UW-Madison app style guide, developed with Polymer 3.

Development and contribution

Running locally

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed.

$ npm install
$ npm start

Running tests

$ polymer test

This component is set up to be tested via web-component-tester.

How to use

Include the component as a dependency (either via CDN or as a project dependency via node)
Add a script tag to the document <head> to get the myuw-app-bar.js file

Using a CDN

Include the following script tag in your document <head>:

<script src="https://unpkg.com/@myuw-web-components/myuw-app-bar@0.1.1">

Using the NPM package

Install the package as a dependency of your project (then use a script tag point to /node_modules):

$ npm i --save @myuw-web-components/myuw-app-bar

Then use the tag in your HTML

<myuw-app-bar
    themeName="MyUW"
    themeUrl=""
    appName=""
    appUrl=""
    background=""
    color=""
>
</myuw-app-bar>

Configurable properties

themeName (theme-name): Sets the theme/portal name (defaults to "MyUW")
themeUrl (theme-url): Sets then URL to go to when user clicks the theme name
appName (app-name): Sets the app name (e.g. "Bucky Backup"), empty by default
appUrl (app-url): Sets then URL to go to when user clicks the app name
background: Sets the top bar's background color (defaults to UW-Madison branding -- #c5050c)
color: Sets the top bar's text color (defaults to white)

Slots for child components

Note: These slots are meant to be used with components in the "myuw" namespace. The child components listed below are works in progress.

myuw-navigation: Insert the <myuw-navigation-drawer> component
myuw-help: Insert the <myuw-help-and-feedback> component
myuw-notifications: Insert the <myuw-notifications> component
myuw-profile: Insert the <myuw-profile> component

Using slots:

To insert a component into the appropriate slot, add a "slot" attribute to your component's HTML tag with the corresponding slot name. For example:

<myuw-app-bar>
    <myuw-navigation slot="myuw-navigation"></myuw-navigation>
</myuw-app-bar>

FAQs

What is @myuw-web-components/myuw-app-bar?

Is @myuw-web-components/myuw-app-bar popular?

Is @myuw-web-components/myuw-app-bar well maintained?

Package last updated on 12 Jun 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install