Skip to content

saberg3/myuw-drawer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<myuw-drawer> and <myuw-drawer-link>

A slide out navigation drawer for use with the MyUW App Bar

Development and contribution

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

$ npm install
$ npm start

Getting Started

Add the following imports to your page's <head>:

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

Using the component

  • Include script tag for component.
  • Add custom html tag
<myuw-drawer>
  <myuw-drawer-link
    slot="myuw-drawer-links"
    name="MyUW home"
    icon="mail"
    href="http://google.com">
  </myuw-drawer-link>
  <myuw-drawer-link
    slot="myuw-drawer-links"
    name="Browse apps"
    icon="explore"
    href="http://google.com">
  </myuw-drawer-link>
</myuw-drawer>

Configuration / child components for the drawer

Use the named <slot> tags to include child components of the myuw-drawer:

Available slots:

  • myuw-drawer-links: Insert the <myuw-drawer-link> component

Configurable properties via attributes for the drawer link

  • Link Text (name): Set the text of the link component
  • Icon (icon): The name of a Material icon to appear next to the link
  • Link URL (href): The the URL of the link

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.0%
  • HTML 38.0%