Skip to content

tabs.md

Latest commit

 

History

History
571 lines (488 loc) · 14.9 KB

tabs.md

File metadata and controls

571 lines (488 loc) · 14.9 KB
title Tabs
status ready
thumb true
description Tabs allow users to navigation between grouped content in different views while within the same page context.
storybook https://dialtone.dialpad.com/vue/?path=/story/components-tabs--default
figma_url https://www.figma.com/design/W58r5BkO8qTw3vem9YieJd/DT9-Component-Library--Rebrand-2025-?node-id=2129-4760
keywords
tab panel
tab navigation
d-tabs
DtTabs
dt-tabs
segmented control
tabbar

Variants

Default

Borderless

Remove the bottom border of any tablist.

Muted

All tabs render as muted buttons. The selected tab is distinguished with active styling.

Outlined

The selected tab renders with an outlined border instead of a filled style.

Muted Outlined

Combines muted kind with outlined selected state.

Disabled

Add disabled to a specific tab.

First Second Third Fourth

Add disabled to the tab group to disable all.

Inverted

The inverted prop has been deprecated. Use the v-dt-mode directive instead.

In place of the inverted prop, use the v-dt-mode directive on the component element.

Spread

Control how tabs distribute available horizontal space within the tab list. It only applies to horizontal tabs, and has no effect with orientation="vertical".

Grow

Tabs expand proportionally to fill the container. Longer labels receive more space.

Tab 1 Tab the second Tab the third

Equal

All tabs share the same width, regardless of label length.

Tab 1 Tab the second Tab the third

Sizes

First Second Third First Second Third First Second Third First Second Third First Second Third

Slots

Icon

Use the #startIcon or #endIcon slot on dt-tab to add an icon. The slot provides iconSize to match the tab's size.

The #icon slot has been deprecated. Use #startIcon or #endIcon instead.
First Second Third

Leading & Trailing

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.

Inbox Archive Drafts

Orientation

Set orientation="vertical" to stack tabs vertically alongside the panel.

Advanced Usages

Automatic Mode

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.

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.

<code-example-tabs :htmlCode='() => $refs.validateTabsExample' vueCode=' <dt-tab-group @before-change="confirmBeforeLeave"> <template #tabs> First Second Third

<script setup> function confirmBeforeLeave (event) { const confirmed = confirm("Are you sure to change tab?"); if (!confirmed) { event.preventDefault(); } } </script>

' showHtmlWarning />

Vue API

Tab Group

Tab Panel

Tab

Classes

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:

<script setup> import ExampleTabs from "@exampleComponents/ExampleTabs.vue"; </script>