Segmented
分段控制器

用于展示多个选项并允许用户选择其中单个选项。
使用import{ Segmented }from"antd";

antd@4.20.0 版本开始提供该组件。

何时使用

  • 用于展示多个选项并允许用户选择其中单个选项;
  • 当切换选中选项时,关联区域的内容会发生变化。

代码演示

最简单的用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

block 属性使其适合父元素宽度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

受控的 Segmented。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

动态加载数据。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

给 Segmented Item 设置 Icon。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

可以为 Segmented 配置 name 参数,为组合内的 input 元素赋予相同的 name 属性,使浏览器把 Segmented 下的 input 真正看作是一组(例如可以通过方向键始终在同一组内更改选项)。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.23.0

垂直方向。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0

Segmented 不可用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

使用 ReactNode 自定义渲染每一个 Segmented Item。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

我们为 <Segmented /> 组件定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

在 Segmented Item 选项中只设置 Icon。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

antd@4.20.0 版本开始提供该组件。

Segmented

参数说明类型默认值版本
block将宽度调整为父元素宽度的选项booleanfalse
defaultValue默认选中的值string | number
disabled是否禁用booleanfalse
onChange选项变化时的回调函数function(value: string | number)
options数据化配置选项内容string[] | number[] | SegmentedItemType[][]
size控件尺寸large | middle | smallmiddle
vertical排列方向booleanfalse5.21.0
value当前选中的值string | number
nameSegmented 下所有 input[type="radio"]name 属性。若未设置,则将回退到随机生成的名称string5.23.0

SegmentedItemType

属性描述类型默认值版本
label分段项的显示文本ReactNode-
value分段项的值string | number-
icon分段项的显示图标ReactNode-
disabled分段项的禁用状态booleanfalse
className自定义类名string-

Semantic DOM

  • root
    6.0.0
    根元素
  • item
    6.0.0
    包裹的子组件
  • label
    6.0.0
    内容元素
  • icon
    6.0.0
    图标元素

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
itemActiveBg选项激活态背景颜色stringrgba(0,0,0,0.15)
itemColor选项文本颜色stringrgba(0,0,0,0.65)
itemHoverBg选项悬浮态背景颜色stringrgba(0,0,0,0.06)
itemHoverColor选项悬浮态文本颜色stringrgba(0,0,0,0.88)
itemSelectedBg选项选中时背景颜色string#ffffff
itemSelectedColor选项选中时文字颜色stringrgba(0,0,0,0.88)
trackBgSegmented 控件容器背景色string#f5f5f5
trackPaddingSegmented 控件容器的 paddingstring | number2

全局 Token如何定制?