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

MyUW App Bar

This is a material top app bar built using the Stencil standalone Web Component starter project.

Getting Started

Include the script in your project:

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

Use the component's HTML tag wherever you want:

<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)

Configuration / child components

Use the named <slot> tags to include child components of the top-app-bar:

<myuw-app-bar>
    <your-navigation-drawer-component slot="myuw-navigation"></your-navigation-drawer-component>
    <your-notifications-component slot="myuw-notifications"></your-notifications-component>
</myuw-app-bar>

Available slots:

• 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

Note: Child components are a WIP