top-app-bar
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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

Dependencies (0)

    Dev Dependencies (6)

    Package Sidebar

    Install

    npm i top-app-bar

    Weekly Downloads

    1

    Version

    0.1.2

    License

    none

    Unpacked Size

    262 kB

    Total Files

    31

    Last publish

    Collaborators

    • zeke.witter