<myuw-app-bar>
A material top app bar designed for use with other MyUW web components
Getting Started
Include the component as follows:
```html
```
Note: The evergreen "latest" version can be used for convenience, but in production settings it is recommended to use the latest
release version specifically, and upgrade only after testing!
Important: For responsiveness to many screen sizes, ensure you have included the viewport meta tag in your application:
```html
```
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:
```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:
```html
```
Available slots:
- myuw-navigation: Insert the
<myuw-navigation-drawer> component
- myuw-feedback: Insert the
<myuw-feedback> component
- myuw-help: Insert the
<myuw-help> 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:
```bash
$ npm install
$ npm start
```
Cross-browser testing provided by:
