Plain paper-tabs.
ITEM ONE
ITEM TWO
ITEM THREE
The no-bar attribute disables the selection bar.
ITEM ONE
ITEM TWO
ITEM THREE
The no-slide attribute prevents the selection bar from
animating when the selection changes.
ITEM ONE
ITEM TWO
ITEM THREE
The noink attribute disables the ink ripple animation seen
when the user activates a tab (by clicking, tapping, etc.).
ITEM ONE
ITEM TWO
ITEM THREE
The scrollable attribute causes the tabs to scroll, rather
than compress, when there is not enough space. Arrow buttons appear when
any of the tabs are not completely visible.
NUMBER ONE ITEM
ITEM TWO
THE THIRD ITEM
THE ITEM FOUR
FIFTH
THE SIXTH TAB
NUMBER SEVEN
EIGHT
NUMBER NINE
THE TENTH
THE ITEM ELEVEN
TWELFTH ITEM
The fit-container attribute causes scrollable tabs to
stretch to fit their container if the tabs don't need to scroll.
NUMBER ONE ITEM
ITEM TWO
THE THIRD ITEM
NUMBER ONE ITEM
ITEM TWO
THE THIRD ITEM
Tab layout is affected by the writing direction of the surrounding area.
ITEM ONE
ITEM TWO
ITEM THREE
NUMBER ONE ITEM
ITEM TWO
THE THIRD ITEM
THE ITEM FOUR
FIFTH
THE SIXTH TAB
NUMBER SEVEN
EIGHT
NUMBER NINE
THE TENTH
THE ITEM ELEVEN
TWELFTH ITEM
Use the align-bottom attribute when your tabs are
positioned below the content they control. The selection bar will be
shown at the top of the tabs.
ITEM ONE
ITEM TWO
ITEM THREE
Use the link attribute when a paper-tab
contains a link. The link will fill the entire tab. paper-tabs
implements its own tabindexing and keyboard focus patterns so an anchor
placed inside should set tabindex="-1".
ITEM ONE
ITEM TWO
ITEM THREE
Tabs can be used in a paper-toolbar.
ITEM ONE
ITEM TWO
Use autoselect to enable automatic tab selection.
ITEM ONE
ITEM TWO
ITEM THREE
Use autoselect-delay to adjust the delay between the last
keyup event and when the tab is automatically selected (when
autoselect is true).
autoselect-delay="0"
ITEM ONE
ITEM TWO
ITEM THREE
autoselect-delay="1000"
ITEM ONE
ITEM TWO
ITEM THREE