mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 03:29:59 +08:00
c878433e9a
* feat: migrate less to token for Segmented * docs: update docs * feat: add debug demo * feat: optimize code * feat: optimize code * feat: optimize code * style: reset style * style: reset style * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code
2.0 KiB
2.0 KiB
| category | subtitle | group | title | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | 分段控制器 | 数据展示 | Segmented | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*papwTpNscPIAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tz7qSaWpi1kAAAAAAAAAAAAADrJ8AQ/original |
|
分段控制器。自 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 |