Tabs Components

Based on:

• useList
• useListOption

Demo

Tab Panel 1

Tab Panel 2

Tab Panel 3

Code

<template>
  <div class="d-demo">
    <TabContainer v-model="currentTab">
      <TabList class="d-tab-list">
        <Tab v-for="(tab, i) in Object.keys(tabs)" :value="i" class="d-tab">
          {{ tab }}
        </Tab>
      </TabList>

      <TabPanel
        v-for="(tab, i) in Object.values(tabs)"
        :value="i"
        class="d-tab-panel"
      >
        {{ tab }}
      </TabPanel>
    </TabContainer>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { TabContainer, TabList, Tab, TabPanel } from "../../../src/main";

const tabs = {
  "Tab 1": "Tab Panel 1",
  "Tab 2": "Tab Panel 2",
  "Tab 3": "Tab Panel 3",
};

const currentTab = ref(0);
</script>

TabContainer

The root component.

Properties

Property	Required	Description	Type	Default
modelValue	false	The selected value.	string | number	undefined

TabList

Properties

Property	Required	Description	Type	Default
orientation	false	The orientation of tabs. Affects keyboard navigation.	'horizontal' | 'vertical'	'horizontal'

Keyboard interactions

• Down Arrow - Moves focus to the next tab (vertical orientation).
• Right Arrow - Moves focus to the next tab (horizontal orientation).
• Up Arrow - Moves focus to the previous tab (vertical orientation).
• Left Arrow - Moves focus to the previous tab (horizontal orientation).
• Home - Moves focus to the first tab.
• End - Moves focus to the last tab.

ARIA roles and attributes

The tab container has the tablist role and automatically manages the following attributes:

• aria-orientation

Tab

Properties

Property	Required	Description	Type	Default
value	true	The value assigned to the tab.	string | number	undefined
id	false	The ID of the tab.	string	auto-generated
aria-controls	false	The ID of the controlled tab panel.	string	auto-generated

ARIA roles and attributes

Tabs are assigned the tab role.

The following attributes are automatically managed:

• aria-selected
• aria-controls

TabPanel

Properties

Property	Required	Description	Type	Default
value	true	The value assinged to the panel. Must match to a tab's value.	string | number	undefined

ARIA roles and attributes

The tab panel has the tablist role and automatically manages the following attributes:

• aria-labelledby