Components
Tabs
Switch between views with the keyboard-accessible UiTabs component.
UiTabs renders a keyboard-accessible tab list (arrow keys, Home/End). Pass an array of tab items and react to selection with updateActiveTab.
Add tabs
<script setup lang="ts">
import type { ITabItem } from '@colorffy/ui'
import { ref } from 'vue'
const tabs: ITabItem[] = [
{ id: 'overview', label: 'Overview' },
{ id: 'pricing', label: 'Pricing' },
{ id: 'faq', label: 'FAQ', disabled: true },
]
const active = ref('overview')
</script>
<template>
<UiTabs :tabs="tabs" :active-tab="active" @update-active-tab="active = $event" />
<section v-show="active === 'overview'">Overview panel</section>
<section v-show="active === 'pricing'">Pricing panel</section>
</template>
Style as pills or contrast
<template>
<UiTabs :tabs="tabs" pill-tabs />
<UiTabs :tabs="tabs" contrast-tabs />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | ITabItem[] | — | Tab items: { id, label, disabled?, panelId? }. |
activeTab | string | first tab | Id of the active tab. |
pillTabs | boolean | false | Pill styling. |
contrastTabs | boolean | false | Contrast styling. |
Emits: updateActiveTab(tabId: string).
For a compact segmented switch, use
UiSegmentedControls with ISegmentedTab items ({ id, label, position }).