UxTabGroup
components/ux/TabGroup.vue
Compact joined-segment switcher — the 24h/7d/30d range-picker look, short (py-0, text-12 on a 20 px line). Black and white: the active segment is solid content-on-surface (black with white text; white with black in dark mode), the rest transparent with content text, inside a content border (design c110). Always exactly one segment selected; optional right-aligned action slot.
Scenarios
components/ux/TabGroup.vue
Usage
<UxTabGroup
:options = "—"
:modelValue = "modelValue"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Array | — | Strings or { value, label } objects (required) |
| modelValue | String | Number | null | Active tab value (v-model); clicking the active tab is a no-op |
Events
| Event | Description |
|---|---|
| update:modelValue | When a different tab is clicked |
Slots
| Slot | Description |
|---|---|
| right | Right-aligned content on the tab bar (e.g. an add action) |