Components
Segmented Controls
A compact segmented switch with an animated indicator.
UiSegmentedControls switches between a small number of options with an animated active indicator. Each tab needs a numeric position for the indicator offset.
Add segmented controls
<script setup lang="ts">
import type { ISegmentedTab } from '@colorffy/ui'
import { ref } from 'vue'
const tabs: ISegmentedTab[] = [
{ id: 'all', label: 'All', position: 0 },
{ id: 'active', label: 'Active', position: 1 },
{ id: 'archived', label: 'Archived', position: 2 },
]
const active = ref('all')
</script>
<template>
<UiSegmentedControls :tabs="tabs" :active-tab="active" @update-active-tab="active = $event" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | ISegmentedTab[] | — | Items: { id, label, position, disabled? }. |
activeTab | string | first tab | Active tab id. |
Emits: updateActiveTab(tabId).
For standard underline-style tabs, use
UiTabs.