mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-24 15:46:10 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity
d9b550a25d
ant-design/components/segmented/index.zh-CN.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

2.2 KiB
Raw Blame History

category group title subtitle description cover coverDark demo
Components 数据展示 Segmented 分段控制器 用于展示多个选项并允许用户选择其中单个选项。 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original
cols
2

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

何时使用

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

代码演示

基本 Block 分段选择器 不可用 受控模式 自定义渲染 动态数据 三种大小 设置图标 只设置图标 受控同步模式 统一高度 自定义组件 Token

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）