分段控制器
Segmented Control
UI 组件也叫：分段选择器、Segmented、切换按钮组、Toggle Group
一句话：几个紧挨着排成一条的选项按钮，同一时间只能选中一个，用来在少量视图或模式之间快速切换。
详细解释
分段控制器看起来像一根被分成几格的胶囊条，选中的那一格有白色滑块或深色底，其余几格是浅色。它常用于切换视图（「列表 / 网格」）、切换时间范围（「日 / 周 / 月」）、切换模式（「浅色 / 深色」）。选项通常只有 2~5 个，每个都是很短的词或图标。
它和 标签页 很像，区别在于：标签页切换的是下面整块不同的内容，通常放在内容上方，样式是带下划线的文字；分段控制器更像一个输入控件，切换的是同一份数据的展示方式或筛选条件，体积小，可以放进工具栏。和 单选框 相比，它更紧凑、更适合频繁切换；选项多于五个或文字较长时，改用下拉选择或单选框。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
图表右上角放一个分段控制器，选项为「日 / 周 / 月」，整体是浅灰色圆角胶囊，选中项显示白色滑块带轻微阴影，切换时滑块平滑移动；默认选中「周」，切换后图表数据随之更新，不刷新页面。
结构与适用场景
结构描述
由一个圆角底槽和其中等宽排列的 2~5 个选项组成，选中项用滑块或深色底突出。
适用场景
- 在同一份数据的两三种展示方式之间切换，比如列表和网格视图
- 切换时间范围、单位这类选项很少且会频繁切换的条件
- 工具栏或卡片右上角空间有限，需要一个紧凑的单选
不适用场景
- 切换的是几块完全不同的内容区域，用标签页更合适
- 选项超过五个或文字很长，一条放不下
- 只有开和关两种状态的设置项，用开关更直观
常见坏用法
- 当作页面主导航使用，切换后整页内容都变了
- 选项文字长短不一，挤得有的换行有的被截断
- 选中态和未选中态颜色太接近，看不出当前选的是哪个
识别特征
- 一根浅灰色圆角胶囊条，被均分成几格
- 其中一格有白色滑块或深色底，表示选中
- 每格只有一两个字或一个图标
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-segmented.el-segmented[class*="MuiToggleButtonGroup-root"][data-slot="toggle-group"]