分段控制Segmented

任务板视图切换:墨色滑块滑动,任务物件跟着变

亲手切视图(列表/网格/紧凑)和范围(全部/今日/本周/归档),看墨色滑块随切换滑动、任务物件重排与筛选;键盘左右箭头、Home、End 可切;归档段默认禁用,演示禁用段的恢复路径。切换结果长在任务物件上,不只靠底部说明。

面板教会的知识点

把刚才在任务板上看到的现象命名清楚。

• 互斥单选:视图段组任何时候只有一个 is-active;范围段组同理。两组互不干扰,各管一个维度。
• 连体紧凑:段按钮共享同一条轨道、无间隔,视觉上是一个控件,而不是几个独立按钮。
• 墨色滑块滑动:选中段用 ink 填充滑块盖住,切换时滑块平滑滑到新位置;选中态有形状(填充块)加文字(白字)双通道,不靠颜色独撑。
• 切换驱动物件:切视图任务卡立即重排(列数、字段显隐);切范围任务卡立即筛选——结果长在任务物件上,不只是按钮换高亮。
• 键盘箭头:Tab 进入段组的当前段,左右方向键在段间移动,Home/End 到达两端;焦点与选中一起走。
• 禁用段可恢复:归档段默认 aria-disabled、视觉变暗、键盘跳过;勾选启用后转为可用——禁用是可恢复的,不是死路。

什么时候用,与 tabs / radio / select 怎么分

从「要切什么」判断,而不是看选项有几个。

• 视觉对照:分段=连体墨色滑块;tabs=下划线指示当前面板;radio=圆点配独立项。三者形态不同,服务于不同的「切」。
• 分段控件切换保留当前页面其他筛选与滚动上下文,不做分页或导航跳转。

怎么用:从维度到窄屏的最短路径

一次到位的检查顺序。

1. 确认是同一维度:选项回答同一个问题(看哪段时间、按什么排序),且互斥;否则用 tabs 或 radio。
2. 控制数量与长度:2–5 个短标签横排;超过或标签很长,改 select 或 tabs。
3. 用真 button 加 aria-pressed:选中段 ink 填充滑块、白字;roving tabindex 让方向键切换,焦点环清晰。
4. 切换驱动物件:切完结果长在同一块内容上(列表重排、数据筛选),保留其他筛选与滚动位置。
5. 禁用段给恢复路径:暂不可用的段用 aria-disabled 加视觉变暗,并提供到达它的设置入口,而不是静默删除。
6. 窄屏换行或下沉:段数多时允许换行;极窄屏可下沉为 select,保持同一维度语义。

同一任务板切视图:正例与反例

只改一个关键选择——用什么控件切视图。