组件 · 数据录入
Segmented 分段控制
分段选择控件。
使用建议
- 避免：与 Tabs 页面切换场景混淆
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import { Segmented, SegmentedItem } from '@selrux/ui/segmented';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
options 可以是字符串数组。
选项对象与禁用
{ value, label, disabled }。
形态
block 撑满宽度，shape="round" 圆角，vertical 纵向。
受控与状态
value / onValueChange 受控；size；disabled 禁用整组；orientation="vertical"；name 表单字段名；组合式 SegmentedItem 的 value / icon。
value = week
API
属性覆盖：示例用到 13 / 13 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Segmented
主题化分段控制器；options 在本层展开为 styled 项后再交给行为层。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 控件尺寸；缺省跟随 ConfigProvider，再回退 md。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
options | 数据化选项；与 SegmentedItem 子节点二选一，优先 options。 | readonly (SegmentedValue | SegmentedOption)[] | - |
value | 受控选中值。 | SegmentedValue | - |
defaultValue | 非受控初始值；缺省取首个可用选项。 | SegmentedValue | - |
onValueChange | 选中变化回调；同值不重复触发。 | ((value: SegmentedValue) => void) | - |
disabled | 整组禁用。 | boolean | - |
block | 占满父级宽度。 | boolean | - |
orientation | 排列方向；与 vertical 同时存在时以本字段优先。 | "horizontal" | "vertical" | - |
vertical | orientation="vertical" 的简写。 | boolean | - |
shape | 外形：默认方角或胶囊。 | "round" | "default" | - |
name | 表单字段名；存在时写入隐藏 input。 | string | - |
children | 复合子节点：SegmentedItem。options 存在时忽略。 | ReactNode | - |
另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。
SegmentedItem
主题化分段项。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value * | 选项值。 | SegmentedValue | - |
icon | 前置图标。 | ReactNode | - |
另有 288 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
导出类型：SegmentedItemProps、SegmentedOption、SegmentedOrientation、SegmentedProps、SegmentedShape、SegmentedSize、SegmentedValue