UxTabGroup
components/ux/TabGroup.vue
Compact joined-segment switcher — the 24h/7d/30d range-picker look; the active segment gets a primary tint. 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) |