Segmented 分段选择器

Rue 的 Segmented 走的是更轻一点的轨道条和卡片式高亮，不照搬其他组件库的视觉，但把日常最常用的那组能力一次覆盖了：受控与非受控、raw value 与对象 options、icon、block、size、round、vertical，以及语义化的 class 和 style 定制。

Input Model

raw value 或对象项都能用

可以先从 string[] 起步，再逐步升级到带 icon 和自定义 label 的 options。

Layout

block、round、vertical 一起补上

既能做紧凑的顶部切换，也能做纵向阶段流和内容分段卡片。

Semantic Styling

root / item / icon / label 可定制

不改组件结构，也能把它塞进你自己的页面氛围里。

# 基础受控模式

最常见的用法：用 value 和 onChange 驱动内容区域切换。

周报视角

5 个主题

更适合团队同步节奏、优先级和资源占用。

Current Value

weekly

切换成本极低

推荐场景筛选与视图切换

# 尺寸、Block 与 Round

这组更适合放在列表、工作台或分析视图顶部，兼顾紧凑和强调感。

Small

Middle

Large

Round / Block

Workspace View

board

小尺寸适合表格工具栏，中尺寸最通用，大尺寸和 round 更适合做内容区一级切换。

# 自定义标签内容

label 支持直接塞入小卡片，让 segmented 不只是一排短文本。

Current Lane

summer

当每个分段都承载额外上下文时，用户不必离开当前区域就能理解状态差异。

# 纵向排列与语义样式

适合阶段流、步骤导航和左侧辅助选择器；classNames 和 styles 都能参与覆盖。

Pipeline Stage

ship

Draft: 需求和素材还在收敛。
Design QA: 视觉、交互和 copy 进入联调。
Ready to Ship: 可以排入发布窗口。
Observe: 当前被禁用，用来表示尚未开放的后续阶段。

# 表单 name、Tooltip 与 Icon-only

内部就是一组 radio input，可以和原生 form 协作；icon-only 项也有 title 和 aria 文本。

# 组件 Icon 受控重渲染

父层每次重渲染都会重新创建 component icon options；runtime 支持层需要保证点击切换后内容不会空白。

panel tone calm

Runtime Compat

受控 component icon 每次重渲染都重新创建

这个示例会在每次渲染时重新创建 options 和图标组件；切换选项或切换父层状态时，按钮内容都不应该再变空白。

当前 channel：mail

外层状态：calm

API

属性	说明	类型	默认值
`options`	支持 string[]、number[] 或对象数组；对象项可带 label、icon、disabled、tooltip。	`SegmentedOptions`	`[]`
`value / defaultValue`	受控与非受控两种写法，值与 options 中的 value 对应。	`string \| number`	`首个可用项`
`onChange`	选项切换时触发，返回当前选中的 value。	`(value) => void`	`-`
`block`	让分段选择器撑满父容器，横向模式下各项会自动平分。	`boolean`	`false`
`size`	支持 small / middle / large 以及 sm / md / lg 别名。	`SegmentedSize`	`middle`
`shape`	切换为默认圆角或更贴近胶囊的 round 形态。	`'default' \| 'round'`	`default`
`orientation / vertical`	横向或纵向排列；同时传入时 orientation 优先。	`'horizontal' \| 'vertical' / boolean`	`horizontal / false`
`disabled`	禁用整个组件；单个 option 也支持 disabled。	`boolean`	`false`
`name`	透传给内部 radio input，方便和原生 form 协作。	`string`	`自动生成`
`classNames / styles`	按 root、item、icon、label 四个语义节点做 class 和 style 定制。	`object \| ({ props }) => object`	`-`

Segmented Item

属性	说明	类型	默认值
`value`	当前项的唯一值。	`string \| number`	`-`
`label`	显示内容，支持字符串、节点或复杂卡片结构。	`any`	`value`
`icon`	附加图标，可单独使用形成 icon-only 选项。	`any`	`-`
`disabled`	单项禁用状态。	`boolean`	`false`
`className / style`	覆盖单项的外观，适合强调当前业务语境。	`string / object`	`-`
`title / tooltip / ariaLabel`	补充原生 title、浏览器 tooltip 和无障碍名称。	`string \| object`	`-`