使用import { Radio } from "antd"; |
// 使用 Radio.Group 组件时，推荐的写法 ✅return (<Radio.Groupvalue={value}options={[{ value: 1, label: 'A' },{ value: 2, label: 'B' },{ value: 3, label: 'C' },]}/>);// 不推荐的写法 🙅🏻♀️return (<Radio.Group value={value}><Radio value={1}>A</Radio><Radio value={2}>B</Radio><Radio value={3}>C</Radio></Radio.Group>);
最简单的用法。
一组互斥的 Radio 配合使用。
block 属性将使 Radio.Group 撑满父容器。
按钮样式的单选组合。
大中小三种组合，可以和表单输入框进行对应配合。
Radio 不可用。
垂直的 Radio.Group，配合更多输入框选项。
通过配置 options 参数来渲染单选框。也可通过 optionType 参数来设置 Radio 类型。
可以为 Radio.Group 配置 name 参数，为组合内的 input 元素赋予相同的 name 属性，使浏览器把 Radio.Group 下的 Radio 真正看作是一组（例如可以通过方向键始终在同一组内更改选项）。
实色填底的单选按钮样式。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| autoFocus | 自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| disabled | 禁用 Radio | boolean | false |
| value | 根据 value 进行比较，判断是否选中 | any | - |
单选框组合，用于包裹一组 Radio。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | solid | outline | |
| defaultValue | 默认选中的值 | any | - | |
| disabled | 禁选所有子单选器 | boolean | false | |
| name | RadioGroup 下所有 input[type="radio"] 的 name 属性。若未设置，则将回退到随机生成的名称 | string | - | |
| options | 以配置形式设置子元素 | string[] | number[] | Array<CheckboxOptionType> | - | |
| optionType | 用于设置 Radio options 类型 | default | button | default | 4.4.0 |
| size | 大小，只对按钮样式生效 | large | middle | small | - | |
| value | 用于设置当前选中的值 | any | - | |
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 |
| onChange | 选项变化时的回调函数 | function(e:Event) | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
| value | 关联 Radio 选项的值 | string | number | boolean | - | 4.4.0 |
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
| className | Radio 选项的类名 | string | - | 5.25.0 |
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
| title | 添加 Title 属性值 | string | - | 4.4.0 |
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
| 名称 | 描述 |
|---|---|
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| buttonBg | 单选框按钮背景色 | string | #ffffff |
| buttonCheckedBg | 单选框按钮选中背景色 | string | #ffffff |
| buttonCheckedBgDisabled | 单选框按钮选中并禁用时的背景色 | string | rgba(0,0,0,0.15) |
| buttonCheckedColorDisabled | 单选框按钮选中并禁用时的文本颜色 | string | rgba(0,0,0,0.25) |
| buttonColor | 单选框按钮文本颜色 | string | rgba(0,0,0,0.88) |
| buttonPaddingInline | 单选框按钮横向内间距 | number | 15 |
| buttonSolidCheckedActiveBg | 单选框实色按钮选中时的激活态背景色 | string | #0958d9 |
| buttonSolidCheckedBg | 单选框实色按钮选中时的背景色 | string | #1677ff |
| buttonSolidCheckedColor | 单选框实色按钮选中时的文本颜色 | string | #fff |
| buttonSolidCheckedHoverBg | 单选框实色按钮选中时的悬浮态背景色 | string | #4096ff |
| dotColorDisabled | 单选框圆点禁用颜色 | string | rgba(0,0,0,0.25) |
| dotSize | 单选框圆点大小 | number | 8 |
| radioSize | 单选框大小 | number | 16 |
| wrapperMarginInlineEnd | 单选框右间距 | number | 8 |
