分段控件Segmented
内容与数据展示在几个只能选一个的模式之间快速切换
也常被叫作分段选择器Segmented Control
容易混淆？这样区分
分段控件Segmented≠按钮Button
分段控件 Segmented 是一组互斥选项，选中一个就会取消另一个；按钮 Button或按钮组（Button Group）只是执行动作，多个按钮之间不代表互斥选项。
什么时候用
- 2~5 个互斥选项，点了立刻生效：列表 / 看板 / 日历列表看板日历
- 只换展示方式不换内容：预览 / 源码预览源码内容不变，只换展示方式
- 选项文案极短，一两个字：日 / 周 / 月日周月选项 2~5 个，文案一两个字
- 工具栏上做即时筛选：今天 / 本周 / 本月今天本周本月
什么时候不用
- 切换的是整组页面内容 → 用 标签页 Tabs概览配置日志
- 选项超过 5 个或文案很长 → 用 选择器 Select全部前端后端设计运营测试选项太多，挤成一团
- 表单里选一个值、提交才生效 → 用 单选框 Radio优先级低中高提交提交才生效的话，单选框更直白
- 表达功能开关时使用开关 Switch；切换视图才使用分段控件开关只有两个状态，开关更顺手
组成结构 · Anatomy
列表看板日历
1分段控件Segmented整体容器，灰底圆角
2选中项Active白底高亮，表示当前值
3分段项Segment其余可选值，点了就换
常见变体 · Variants
默认Default
列表看板日历
少量并列视图需要在原位置快速切换时
带图标Icon
☰ 列表▦ 看板📅 日历
文案太抽象时，加图标一眼认出
小尺寸Small
日周月
空间紧张的工具栏里用
典型使用场景
列表 / 看板视图切换
迭代任务列表看板日历
待办 · 2
登录页 UI 走查
接口联调
进行中 · 1
看板拖拽排序
已完成 · 5
需求评审
图表类型切换
访问趋势折线柱状饼图
一二三四五六日
日 / 周 / 月粒度切换
数据中心日周月
本周活跃用户
2,318
本周订单
486
本周营收
¥3.6万
预览 / 源码切换