top-app-bar

Material top app bar built with StencilJS

Usage no npm install needed!

<script type="module">
  import topAppBar from 'https://cdn.skypack.dev/top-app-bar';
</script>

README

Built With Stencil

Top 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/top-app-bar@0.1.1/dist/top-app-bar.js">

Use the component's HTML tag wherever you want:

<top-app-bar
    first-name="MyUW"
    second-name="Bucky Backup"
    background="#c5050c"
    color="white"
>

Configuration / child components

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

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

Available slots:

  • navigation-drawer: An icon button that opens/closes the app navigation drawer
  • help-and-feedback: An icon button that displays a modal with help, feedback, and accessibility information
  • notifications-bell: An icon button that displays a list of notifications and a link to see all
  • profile-menu: An icon/avatar button that displays a menu with person-related links

Note: Child components are a WIP