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-theme
CSS property.
To receive theme styling: make sure to set the desired value for this property inside of the :root
selector.
These styles are only for the merged platform and is not production ready.
<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-divider></tk-tab-divider>
<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.
<tk-tabs-container>
<tk-tabs fill-container="true">
<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-link tab-title="Flourish & Blotts" url="https://www.pottermore.com/"></tk-tab-link>
</tk-tabs>
</tk-tabs-container>
By default, options are as wide as their content. To have them grow to the width of their container, set fill-container
.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
fillContainer |
fill-container |
Used to equally split the available container width over the tabs | boolean |
false |
position |
position |
Aligns the tab to the left , center , or right . |
"center" | "left" | "right" |
'left' |
size |
size |
Size of the tabs | "large" | "medium" |
'medium' |
vertical |
vertical |
Used to arrange tabs vertically | boolean |
false |
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
badgeText |
badge-text |
String for including a tk-badge count. If left off, no badge will be rendered. |
string |
undefined |
badgeType |
badge-type |
String for the type of tk-badge |
"alert" | "dark" | "error" | "info" | "light" | "muted" | "success" | "warning" |
'light' |
disabled |
disabled |
Disables the button. | boolean |
false |
isActive |
is-active |
Boolean for setting the active state of a tab. The first tab sets isActive to true if all other tabs are unset. | boolean |
false |
tabTitle |
tab-title |
String that sets the label of a tab. | string |
undefined |
vertical |
vertical |
Used to arrange tabs vertically | boolean |
false |
Event | Description | Type |
---|---|---|
tabSelected |
Fired any time a tk-tab-button is selected. This allows you to show a tab, or fire a tracking |
CustomEvent<string> |
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
badgeText |
badge-text |
String for including a tk-badge count. If left off, no badge will be rendered. |
string |
undefined |
badgeType |
badge-type |
String for the type of tk-badge |
"alert" | "dark" | "error" | "info" | "light" | "muted" | "success" | "warning" |
'light' |
disabled |
disabled |
Disables the link. | boolean |
false |
isActive |
is-active |
Boolean for setting the active state of a tab. The first tab sets isActive to true if all other tabs are unset. | boolean |
false |
tabTitle |
tab-title |
String that sets the label of a tab. | string |
undefined |
url |
url |
The href for a tk-tab-link . |
string |
undefined |
vertical |
vertical |
Used to arrange tabs vertically | boolean |
false |
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
vertical |
vertical |
Used to arrange the divider vertically | boolean |
false |
Receives :focus
aria-selected
should be true
when in focus and false
when not