search

greenyouse / bottom-nav

Material Design bottom-nav https://material.io/guidelines/components/bottom-navigation.html
MIT License
25 stars 6 forks source link
material-design navigation web-component

readme

\<bottom-nav> Published on webcomponents.org

Bottom navigation for mobile that follows the Material Design specification.

    <bottom-nav shadow>
      <bottom-toolbar selected="0">
        <bottom-tab  selected-class="grey" label="Movies & TV" icon="notification:ondemand-video"></bottom-tab>
        <bottom-tab  selected-class="green"label="Music" icon="image:music-note"></bottom-tab>
        <bottom-tab  selected-class="brown"label="Books" icon="icons:book"></bottom-tab>
        <bottom-tab  selected-class="darkbrown" label="Newstand" icon="av:web"></bottom-tab>
      </bottom-toolbar>
    </bottom-nav>
    <sample-content size="10"></sample-content>

Installation

$ bower install greenyouse/bottom-nav --save

Import

<link rel="import" href="https://github.com/greenyouse/bottom-nav/blob/master/bower_components/bottom-nav/bottom-nav.html">
<link rel="import" href="https://github.com/greenyouse/bottom-nav/blob/master/bower_components/bottom-nav/bottom-toolbar.html">
<link rel="import" href="https://github.com/greenyouse/bottom-nav/blob/master/bower_components/bottom-nav/bottom-tab.html">

Credits

This is a fork of paper-tabs and app-layout.