← 返回 Web 词条
分段控制器
Web 原生没有这个
Web 没有原生的分段控制器元素。互斥选择应优先使用原生单选按钮并调整样式;只有在切换同一页面内的内容面板时才使用标签页模式。
通常怎么做:用一组 radio 表达互斥选择并绘制成连续按钮;切换面板时遵循 ARIA Tabs。
它把少量互斥选项并排连在一起,点其中一格就会立即切换当前选择或内容。
- 几个选项挤在一条里只能选一个
- 一排连在一起点哪个哪个亮的按钮
- 像药丸一样分成几格的选择按钮
- 分段控制器
- 分段选择器
- 分段按钮
- 胶囊切换
其他平台的相似实现
iOS原生支持
Segmented Control本平台没有对应叫法适合少量、互斥且地位相同的选项,用户选中后通常立即生效。
看 iOS 视角 →Android原生支持
Segmented Button本平台没有对应叫法Material 3 提供单选和多选两种分段按钮组。
看 Android 视角 →使用规范
什么时候用
- 在两到五个简短、互斥且同等重要的选项之间切换
- 选择后可以立即更新当前内容,不需要额外提交按钮
- 所有选项需要同时可见,方便用户直接比较
- 当前选中项需要持续清楚可见,让用户随时知道正在查看哪种状态
什么时候别用
- 选项很多或标签很长 → 用 Select、菜单或单独的选择页
- 需要同时选择多个项目 → 除非平台明确使用多选分段按钮,否则用复选框
- 用于应用一级页面导航 → 用 Tab Bar 或 Navigation Bar
Web 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。