认导航
分段控件
Segmented Control
「连成一串的按钮」「选一段高亮」「iOS那种切换条」「几选一的长按钮」「分段切换」「按下去整条的」「筛选切换条」
LIVE DEMO真实可交互，动手试试
- 英文名
- Segmented Control
- 别名 · 俗称
- 分段选择器分段按钮iOS 风切换条shadcn: ToggleGroup
- Web 叫法
- Segmented Control
- 大白话定义
- 一整条被切成几段的按钮，选中某段就高亮，常用来切换视图或筛选条件。
- 部位拆解
- 分段 Segment每一段是一个选项，点谁谁生效
- 选中态 Selected当前段高亮反色，一眼看出选了谁
- 容器 Track把几段包成一个整体的底槽
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
在列表上方加分段控件（ToggleGroup）：「全部、未读、已读」，选中即筛选列表数据
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的分段控件（Segmented Control）。逐一排除：选中滑块用 left 和 width 做动画，闪烁卡顿，该换 transform；切换选项时下方内容区高度跳动；选项文字太长被截断又没省略提示；选中态只靠颜色区分，缺 aria-pressed，读屏和色盲用户都分不清。症状是：