跳到主要内容
Termlib

UI 组件 · 表单输入

分段控制器

Segmented Control

也叫：分段选择器、Segmented、切换按钮组、Toggle Group

几个紧挨着排成一条的选项按钮，同一时间只能选中一个，用来在少量视图或模式之间快速切换。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

图表右上角放一个分段控制器，选项为「日 / 周 / 月」，整体是浅灰色圆角胶囊，选中项显示白色滑块带轻微阴影，切换时滑块平滑移动；默认选中「周」，切换后图表数据随之更新，不刷新页面。

发给

01判断

你的内容是这样吗？

对照两列，确认分段控制器是不是你要找的。

符合这些情况，用分段控制器

  • 在同一份数据的两三种展示方式之间切换，比如列表和网格视图
  • 切换时间范围、单位这类选项很少且会频繁切换的条件
  • 工具栏或卡片右上角空间有限，需要一个紧凑的单选

是这些情况，换成别的

  • 切换的是几块完全不同的内容区域

    改用标签页

  • 选项超过五个或文字很长，一条放不下

  • 只有开和关两种状态的设置项

    改用开关

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    当作页面主导航使用，切换后整页内容都变了

  2. 02

    选项文字长短不一，挤得有的换行有的被截断

  3. 03

    选中态和未选中态颜色太接近，看不出当前选的是哪个

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一个圆角底槽和其中等宽排列的 2~5 个选项组成，选中项用滑块或深色底突出。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一根浅灰色圆角胶囊条，被均分成几格
  2. 2其中一格有白色滑块或深色底，表示选中
  3. 3每格只有一两个字或一个图标

04解释

详细解释

分段控制器看起来像一根被分成几格的胶囊条，选中的那一格有白色滑块或深色底，其余几格是浅色。它常用于切换视图（「列表 / 网格」）、切换时间范围（「日 / 周 / 月」）、切换模式（「浅色 / 深色」）。选项通常只有 2~5 个，每个都是很短的词或图标。

它和 标签页 很像，区别在于：标签页切换的是下面整块不同的内容，通常放在内容上方，样式是带下划线的文字；分段控制器更像一个输入控件，切换的是同一份数据的展示方式或筛选条件，体积小，可以放进工具栏。和 单选框 相比，它更紧凑、更适合频繁切换；选项多于五个或文字较长时，改用下拉选择或单选框。

开发者信息
术语 ID
component-segmented
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-segmented
  • .el-segmented
  • [class*="MuiToggleButtonGroup-root"]
  • [data-slot="toggle-group"]
  • .ant-radio-group:has(> .ant-radio-button-wrapper)
  • .el-radio-group:has(> .el-radio-button)
  • .arco-radio-group-button
  • .btn-group-toggle
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • segmented
  • segmented-control
  • segment
  • segment-control
  • toggle-group
  • btn-toggle
  • button-toggle
  • view-toggle
  • view-switcher
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Segmented
  • SegmentedControl
  • ToggleGroup
  • ToggleButtonGroup
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30