Tabs

Navigation

Organizes content into selectable panels.

Props

Prop	Type	Default	Description
`modelValue`	`string`	—	Active tab value (v-model).

Examples

vue

<DsTabs>
  <DsTabList>
    <DsTab value="overview">Overview</DsTab>
    <DsTab value="details">Details</DsTab>
  </DsTabList>
  <DsTabPanels>
    <DsTabPanel value="overview">Overview content.</DsTabPanel>
    <DsTabPanel value="details">Details content.</DsTabPanel>
  </DsTabPanels>
</DsTabs>

Skeleton

Use DsTabsSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsTabsSkeleton />

4 Tabs

vue

<DsTabsSkeleton :tabsCount="4" />

Pills

vue

<DsTabsSkeleton variant="pills" />

Accessibility

Tab list uses role="tablist".
Arrow keys navigate between tabs.

Pagination

VerticalNav