README.md
##<paper-tabs>
Material design: Tabs
paper-tabs makes it easy to explore and switch between different views or functional aspects of
an app, or to browse categorized data sets.
Use selected property to get or set the selected tab.
Example:
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
See paper-tab for more information about
paper-tab.
A common usage for paper-tabs is to use it along with iron-pages to switch
between different views.
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</iron-pages>
To use links in tabs, add link attribute to paper-tab and put an <a>
element in paper-tab.
Example:
<style is="custom-style">
.link {
##<paper-tab>
paper-tab is styled to look like a tab. It should be used in conjunction with
paper-tabs.
Example:
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--paper-tab-ink |
Ink color | --paper-yellow-a100 |
--paper-tab |
Mixin applied to the tab | {} |
--paper-tab-content |
Mixin applied to the tab content | {} |
--paper-tab-content-unselected |
Mixin applied to the tab content when the tab is not selected | {} |