分段控件

SegmentedControl操作与导航

胶囊轨道里的一组选项，当前项下是弹簧滑块，切换时滑到新位置。Tabs 与 Radio 两种语义：Tabs 用于切换视图、筛选，Radio 用于设置取值。选项带图标时，容器窄于 16rem 自动只留图标（文字仍供读屏）；icon_only 则固定只显示图标。

属性

名称	类型	默认值	说明
`items`	`Signal<Vec<SegmentedItem<T>>>`	必填	选项列表；SegmentedItem::new(value, label) 可链式 .icon(..)、.count(..)。
`value`	`Signal<T>`	必填	当前选中的值；没有匹配项时没有当前项。
`on_change`	`Callback<T>`	必填	切换后返回新值（点击与键盘都会触发）。
`aria_label`	`String`	必填	控件组的无障碍名称。
`kind`	`SegmentedKind`	`Tabs`	语义：Tabs（tablist / aria-selected）或 Radio（radiogroup / aria-checked）。
`size`	`SegmentedSize`	`Md`	尺寸：Md 或 Sm。
`icon_only`	`bool`	`false`	只显示图标，文字作为 aria-label 与 title。
`class`	`String`	`""`	外层容器附加类（间距、页面变体）。

键盘

← / →: 切换到相邻选项（首尾循环）
Home / End: 切换到首个或末个选项
Tab: 进入或离开控件组

用法

src/components/ui/segmented.rs

let mode = RwSignal::new("light".to_string());

view! {
    <SegmentedControl
        items=vec![
            SegmentedItem::new("light".to_string(), "\u6D45\u8272").icon(IconName::Sun),
            SegmentedItem::new("dark".to_string(), "\u6DF1\u8272"),
        ]
        value=mode
        kind=SegmentedKind::Radio
        aria_label="\u5916\u89C2"
        on_change=move |value: String| mode.set(value)
    />
}

预览

属性

键盘

用法