Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information. A count badge can also be used in a tab.
<tk-tabs-container>
<tk-tabs>
<tk-tab-button tab-selected="yourFunction()" tab-title="Gringotts" badge-type="light" badge-text="75"></tk-tab-button>
<tk-tab-button is-active="true" tab-title="The Leaky Cauldron"></tk-tab-button>
<tk-tab-button tab-title="Disabled Tab" disabled></tk-tab-button>
<tk-tab-divider></tk-tab-divider>
<tk-tab-link tab-title="Flourish & Blotts" url="https://www.pottermore.com/"></tk-tab-link>
</tk-tabs>
</tk-tabs-container>
Tab children can either be <tk-tab-button>
or <tk-tab-link>
. Most likely, you’ll want to use the button.
<tk-tabs-container>
<tk-tabs vertical="true">
<tk-tab-subheader>subheader</tk-tab-subheader>
<tk-tab-button tab-selected="yourFunction()" tab-title="Gringotts" badge-type="light" badge-text="75"></tk-tab-button>
<tk-tab-button tab-title="The Leaky Cauldron1"></tk-tab-button>
<tk-tab-divider vertical></tk-tab-divider>
<tk-tab-subheader>second subheader</tk-tab-subheader>
<tk-tab-button tab-title="The Leaky Cauldron2"></tk-tab-button>
<tk-tab-button tab-title="Disabled Tab" disabled></tk-tab-button>
</tk-tabs>
</tk-tabs-container>
Tab children can either be <tk-tab-button>
or <tk-tab-link>
. Most likely, you’ll want to use the button.
<tk-tab-subheader>
is currently only for vertical tabs.
<tk-tabs-container>
<tk-tabs position="center">
<tk-tab-button tab-title="Borgin & Burkes"></tk-tab-button>
<tk-tab-button tab-title="Honeydukes"></tk-tab-button>
</tk-tabs>
</tk-tabs-container>
This sets the alignment of the tabs. The default is aligned to the left.
Property | Default | Description |
---|---|---|
disabled |
false |
Disables the button or link. |
position |
left |
Aligns the tab to the left , center , or right . |
tabTitle |
'' |
String that sets the label of a tab. |
url |
'' |
The href for a tk-tab-link . |
isActive |
false |
Boolean for setting the active state of a tab. The first tab sets isActive to true if all other tabs are unset. |
badgeText |
'' |
String for including a tk-badge count. If left off, no badge will be rendered. |
badgeType |
light |
String for the type of tk-badge . |
vertical |
false |
Tabs will be arranged vertically. |
Name | Description |
---|---|
tabSelected |
Fired any time a tk-tab-button is selected. This allows you to show a tab, or fire a tracking event. |
:focus
aria-selected
should be true
when in focus and false
when not