XSegmented — Segmented Selector
A lightweight segmented selector, intended as an alternative to el-radio-group. Bind the selected value via v-model, and pass the segments through options (either strings or { label, value } objects).
Live Demo
Current selection: live
vue
<script setup>
import { ref } from 'vue'
const seg = ref('live')
const options = [
{ label: 'Live', value: 'live' },
{ label: 'History', value: 'history' },
{ label: 'Trend', value: 'trend' },
]
</script>
<template>
<XSegmented v-model="seg" :options="options" />
</template>Props / Events
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | string | number | boolean | '' | Currently selected value |
options | array | — (required) | Segments: an array of strings, or an array of { label, value } objects |
Usage Notes
- No UI library dependency — pure CSS implementation, zero third-party dependencies.
- The selected style uses the app-level CSS variables
--surface-2/--border(with default fallbacks), and highlights the accent color on.x-segmented__item.is-active.