<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-app-bar@^1?module"></script>
<script nomodule scr="https://unpkg.com/@myuw-web-components/myuw-app-bar@^1"></script>

Important: For responsiveness to many screen sizes, ensure you have included the viewport meta tag in your application:

<meta name="viewport" content="width=device-width, initial-scale=1">

Use the component's HTML tag wherever you want:

<myuw-app-bar
    theme-name="MyUW"
    app-name=""
    app-url=""
>
</myuw-app-bar>

Configurable properties via attributes

themeName (theme-name): Sets the theme/portal name (defaults to "MyUW")
appName (app-name): Sets the app name (e.g. "Bucky Backup")
appUrl (app-url): Sets then URL to go to when user clicks the app title

Styling the app bar

MyUW app bar exposes custom CSS properties so users can change some of its styles.

--myuw-app-bar-bg: Background color for the app bar
--myuw-app-bar-font: Font stack for the app bar
--myuw-app-bar-color: Font color for the app bar

For more information about CSS variables and how they work with MyUW Web Components, reference the styles component

How to use custom CSS properties

Add the following selector to your CSS:

myuw-app-bar {
    --myuw-app-bar-bg: #fff;
    --myuw-app-bar-color: #c5050c;
    --myuw-app-bar-font: 'Roboto', sans-serif;
    --myuw-app-bar-title-font-size: 18px;
    --myuw-app-bar-font-weight: 400;
    --theme-text-font-weight: 600;
    --z-index: 56;
}

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
myuw-search: Insert the <myuw-search> component

Development and contribution

To run the demo app locally and test the component, run the following commands:

$ npm install
$ npm start

Cross-browser testing provided by:

1.5.5

Added

Exposed a new css property to set the font size of the app bar title (--myuw-app-bar-title-font-size). Usage instructions are in the README.

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 15 May 2019

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