Skip to main content

SegmentedControl

Function SegmentedControl 

Source
pub fn SegmentedControl<T>(props: SegmentedControlProps<T>) -> impl IntoView
where T: Clone + PartialEq + Send + Sync + 'static,
Expand description

分段控件。

胶囊轨道里放一组选项,当前项下是浮起的滑块,切换时以 snappy 弹簧滑到新位置。 ←/→ 在选项间循环并立即切换,Home/End 跳到首尾,焦点随之移动(roving tabindex, Tab 只停在当前项)。滑块测量完成前(含服务端渲染与 hydration 首帧),当前项直接 画浮起底色,首屏不闪。

Props:

  • items:选项列表,见 SegmentedItem;既可传 Vec,也可传信号或闭包(数量变化时 选项按序号原地更新、不重建按钮,焦点不丢)
  • value:当前值(值、信号或闭包);没有匹配项时没有当前项
  • on_change:切换时的回调
  • aria_label:控件组的无障碍名称
  • kind:语义,Tabs(默认)或 Radio,见 SegmentedKind
  • size:Md(默认)或 Sm
  • icon_only:只显示图标,文字作为 aria-label 与 title
  • class:外层容器附加类(间距、页面变体)

带图标且未设 icon_only 时,容器窄于 16rem 自动只留图标(文字仍供读屏)。 容器对宽度有尺寸包含,放进 flex 行时调用方必须给它宽度。

选项按钮不再带 seg-N-i 形式的 id:该序号来自全局计数器,服务端(进程级)与 水合后的客户端计数不一致;焦点移动改为按序号在轨道内查询 .segmented-item。

§Required Props

§Optional Props