分段控制器 Segmented - Ant Design

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

何时使用

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

代码演示

API

通用属性参考：通用属性

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

Segmented

参数	说明	类型	默认值	版本
block	将宽度调整为父元素宽度的选项	boolean	false
classNames	用于自定义 Segmented 组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-
defaultValue	默认选中的值	string \| number
disabled	是否禁用	boolean	false
onChange	选项变化时的回调函数	function(value: string \| number)
options	数据化配置选项内容	string[] \| number[] \| SegmentedItemType[]	[]
orientation	排列方向	`horizontal` \| `vertical`	`horizontal`
size	控件尺寸	`large` \| `middle` \| `small`	`middle`
styles	用于自定义 Segmented 组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM , CSSProperties> \| (info: { props }) => Record<SemanticDOM , CSSProperties>	-
vertical	排列方向，与 `orientation` 同时存在，以 `orientation` 优先	boolean	`false`	5.21.0
value	当前选中的值	string \| number
shape	形状	`default` \| `round`	`default`	5.24.0
name	Segmented 下所有 `input[type="radio"]` 的 `name` 属性。若未设置，则将回退到随机生成的名称	string		5.23.0

SegmentedItemType

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

Semantic DOM

List

Kanban

root
6.0.0
根元素，设置行内块布局、内边距、背景色、圆角、过渡动画和容器样式
item
6.0.0
选项元素，设置相对定位、文本对齐、光标样式、过渡动画、选中态背景色和悬停态样式
label
6.0.0
标签内容元素，设置最小高度、行高、内边距、文本省略和内容布局样式
icon
6.0.0
图标元素，设置图标的尺寸、颜色和与文本的间距样式

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
itemActiveBg	选项激活态背景颜色	string	rgba(0,0,0,0.15)
itemColor	选项文本颜色	string	rgba(0,0,0,0.65)
itemHoverBg	选项悬浮态背景颜色	string	rgba(0,0,0,0.06)
itemHoverColor	选项悬浮态文本颜色	string	rgba(0,0,0,0.88)
itemSelectedBg	选项选中时背景颜色	string	#ffffff
itemSelectedColor	选项选中时文字颜色	string	rgba(0,0,0,0.88)
trackBg	Segmented 控件容器背景色	string	#f5f5f5
trackPadding	Segmented 控件容器的 padding	string \| number	2

全局 Token如何定制？