分段控制器 Segmented - Ant Design

分段控制器。自 antd@4.20.0 版本开始提供该组件。

何时使用

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

代码演示

API

通用属性参考：通用属性

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

Segmented

参数	说明	类型	默认值	版本
block	将宽度调整为父元素宽度的选项	boolean	false
defaultValue	默认选中的值	string \| number
disabled	是否禁用	boolean	false
onChange	选项变化时的回调函数	function(value: string \| number)
options	数据化配置选项内容	string[] \| number[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }>	[]
size	控件尺寸	`large` \| `middle` \| `small`	`middle`
value	当前选中的值	string \| number

主题变量（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)

全局 Token如何定制？