组件 · 导航 · 原生 HTML 与 React
分段控件 Segmented
2–4 个互斥选项挤在一条里:视图切换、类型选择。
演示
<div class="xxd-segmented" role="radiogroup" data-xxd-segmented aria-label="类型">
<button role="radio" aria-checked="true">文本</button>
<button role="radio" aria-checked="false">图片</button>
</div>export function SegmentedDemo() {
const [v, setV] = useState<"text" | "image">("text");
return <Segmented label="类型" value={v} onValueChange={setV} options={[{ value: "text", label: "文本" }, { value: "image", label: "图片" }]} />;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-segmented |
JS
group.addEventListener("xxd:change", (e) => e.detail.value)键盘与读屏
- role=radiogroup + aria-label,每段 role=radio + aria-checked
- ← → 切换,Tab 只停一次;选中态在高对比模式下有描边
规则
- 一个托盘,选中段像纸一样浮出来,不是框里套框