Tabs allow users to navigation between grouped content in different views while within the same page context.
Preview
Variants #
Default #
<dt-tab-group label="Label Example Group"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group>
Borderless #
Add a d-tablist--no-border to remove the bottom border of any tablist. Handy for small tablists and tablists serving as subtabs to a larger menu.
<dt-tab-group label="Label Example Group" :borderless="true"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group>
Inverted #
Add d-tablist--inverted when you want to display tabs on inverted background.
<dt-tab-group label="Label Example Group" :inverted="true"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group>
Disabled #
<dt-tab-group label="Label Example Group" :disabled="true"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group>
Sizes #
Default #
<dt-tab-group label="Label Example Group"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group>
Small #
<dt-tab-group label="Label Example Group" size="sm"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group>
Advanced Usages #
Validation Before Changing Tabs #
If you need to do some validation before changing tabs, you can use the before-change event. If the event handler is prevented, the tab change will be cancelled.
<dt-tab-group label="Label Example Group" @before-change="confirmBeforeLeave" > <template #tabs> <dt-tab id="1" panel-id="2" selected> First tab </dt-tab> <dt-tab id="3" panel-id="4"> Second tab </dt-tab> <dt-tab id="5" panel-id="6"> Third tab </dt-tab> </template> <div> <dt-tab-panel id="2" tab-id="1"> <p>First tab content panel</p> </dt-tab-panel> <dt-tab-panel id="4" tab-id="3"> <p>Second tab content panel</p> </dt-tab-panel> <dt-tab-panel id="6" tab-id="5"> <p>Third tab content panel</p> </dt-tab-panel> </div> </dt-tab-group> <script setup> function confirmBeforeLeave (event) { const confirmed = confirm("Are you sure to change tab?"); if (!confirmed) { event.preventDefault(); } } </script>
Vue API #
Tab Group #
Slots
Name
|
Description
|
|---|---|
default | Default slot for Panel |
tabs | Slot for Tabs |
Props
Name
|
Description
|
Default
|
|---|---|---|
borderless | If true, applies borderless styles to the tab group Type: booleanValues: truefalse | false |
disabled | If true, disables the tab group Type: booleanValues: truefalse | false |
inverted | If true, applies inverted styles to the tab group Type: booleanValues: truefalse | false |
label | Identifies the tab group Type: string | '' |
selected | The id of the selected tab panel which should be displayed Type: string | '' |
size | If provided, applies size styles to the tab group Type: stringValues: defaultsm | 'default' |
tabListChildProps | Pass through props, used to customize the tab list Type: object | {} |
tabListClass | Pass through classes, used to customize the tab list Type: string|array|object | '' |
Events
Name
|
Description
|
|---|---|
before-change | Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary. Type: Event |
change | Change tab event with the arguments: selected id of the current tab and disabled value Type: Object |
Tab Panel #
Slots
Name
|
Description
|
|---|---|
default | Default slot for Tab Panel |
Props
Name
|
Description
|
Default
|
|---|---|---|
id
required
| Id of the panel Type: string | |
tabId
required
| Id of the associated tab Type: string | |
hidden | If true, hides the tab content Type: booleanValues: truefalse | false |
tabPanelClass | Used to customize the tab element Type: string|array|object | '' |
Tab #
Slots
Name
|
Description
|
|---|---|
default | default slot, defaults contains dt-button |
Props
Name
|
Description
|
Default
|
|---|---|---|
id
required
| Id of the tab Type: string | |
panelId
required
| Id of the associated content panel Type: string | |
disabled | If true, disables the tab Type: booleanValues: truefalse | false |
label | Describes the tab Type: string | '' |
selected | Controls the state of the tab Type: booleanValues: truefalse | false |
tabClass | Used to customize the tab element Type: string|array|object | '' |
Events
Name
|
Description
|
|---|---|
click | Native button click event Type: PointerEvent | KeyboardEvent |
focus | Native button focus in event Type: FocusEvent |
Classes #
Class
|
Applies to
|
Description
|
|---|
Accessibility #
To create accessible tabs, be sure to implement the proper keyboard navigation and utilize the following ARIA roles to properly declare element roles, content relationships, and current status:
Item
|
Applies to
|
Description
|
|---|