In place of the inverted prop, use the v-dt-mode directive on the component element.
<dt-tab-grouplabel="Label Example Group"v-dt-mode:invert><template#tabs><dt-tabid="1"panel-id="2"selected>First tab</dt-tab><dt-tabid="3"panel-id="4">Second tab</dt-tab></template></dt-tab-group>
Control how tabs distribute available horizontal space within the tab list. It only applies to horizontal tabs, and has no effect with orientation="vertical".
Tabs expand proportionally to fill the container. Longer labels receive more space.
<dt-tab-grouplabel="Label Example Group"spread="grow"><template#tabs><dt-tabid="sg1"panel-id="sg2"selected>Tab 1</dt-tab><dt-tabid="sg3"panel-id="sg4">Tab the second</dt-tab><dt-tabid="sg5"panel-id="sg6">Tab the third</dt-tab></template></dt-tab-group>
All tabs share the same width, regardless of label length.
<dt-tab-grouplabel="Label Example Group"spread="equal"><template#tabs><dt-tabid="se1"panel-id="se2"selected>Tab 1</dt-tab><dt-tabid="se3"panel-id="se4">Tab the second</dt-tab><dt-tabid="se5"panel-id="se6">Tab the third</dt-tab></template></dt-tab-group>
Use the #startIcon or #endIcon slot on dt-tab to add an icon. The slot provides iconSize to match the tab's size.
<dt-tab-grouplabel="Label Example Group"><template#tabs><dt-tabid="1"panel-id="2"selected>
First
<template#startIcon="{ iconSize }"><dt-iconname="box-select":size="iconSize"/></template></dt-tab><dt-tabid="3"panel-id="4">
Second
<template#startIcon="{ iconSize }"><dt-iconname="box-select":size="iconSize"/></template><template#endIcon="{ iconSize }"><dt-iconname="box-select":size="iconSize"/></template></dt-tab><dt-tabid="5"panel-id="6">
Third
<template#endIcon="{ iconSize }"><dt-iconname="box-select":size="iconSize"/></template></dt-tab></template></dt-tab-group>
Use the #leading and #trailing slots on dt-tab to render content like badges or count indicators alongside tab labels. Use leading-class and trailing-class to adjust padding.
<dt-tab-grouplabel="Label Example Group"><template#tabs><dt-tabid="lt1"panel-id="lt2"selectedtrailing-class="d-pie-100">
Inbox
<template#trailing><dt-badgekind="count"type="bulletin"text="9"/></template></dt-tab><dt-tabid="lt3"panel-id="lt4"trailing-class="d-pie-100">
Archive
<template#trailing><dt-badgekind="count"text="99+"/></template></dt-tab><dt-tabid="lt5"panel-id="lt6">
Drafts
</dt-tab></template></dt-tab-group>
By default, tabs use manual activation — the user must press Enter or Space after focusing a tab to select it. Set activation-mode="auto" to select tabs immediately on focus via arrow keys, following the WAI-ARIA Tabs pattern.
<dt-tab-grouplabel="Label Example Group"activation-mode="auto"><template#tabs><dt-tabid="1"panel-id="2"selected>First tab</dt-tab><dt-tabid="3"panel-id="4">Second tab</dt-tab><dt-tabid="5"panel-id="6">Third tab</dt-tab></template></dt-tab-group>
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-grouplabel="Label Example Group"@before-change="confirmBeforeLeave"><template#tabs><dt-tabid="1"panel-id="2"selected>First tab</dt-tab><dt-tabid="3"panel-id="4">Second tab</dt-tab><dt-tabid="5"panel-id="6">Third tab</dt-tab></template></dt-tab-group><scriptsetup>functionconfirmBeforeLeave(event){const confirmed =confirm("Are you sure to change tab?");if(!confirmed){
event.preventDefault();}}</script>
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: