@agala-labs/ui
Tabs
Navigates among related content panels while preserving context.
Examples
Default
Project health and recent milestones.
<AgalaTabs v-model="tab" :tabs="tabs"><template #panel-overview>Overview</template></AgalaTabs>Import
import { AgalaTabs } from '@agala-labs/ui'API
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | — | Required tab definitions. |
modelValue | string | — | Required active tab. |
variant | 'underline' | 'pills' | 'underline' | Visual treatment. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Axis of the tab strip and its arrows. |
ariaLabel | string | — | Accessible name for the tab list. |
class | string | — | Consumer override class. |
Events
update:modelValue(value: string)
Slots
panel-<value>tab-<value> — receives { tab, active }
Accessibility
Implements tablist, tab, and tabpanel relationships. Arrow keys follow the configured orientation (Left/Right horizontally, Up/Down vertically), Home, and End skip disabled tabs. Use Segmented Control instead when changing a form value or immediate view mode.