RadioField 单选
何时使用
- 单选框允许用户从一个数据集中选择单个选项。面向用户需要并排看到所有的可选项,并使用单选框进行排他操作的场景。
- 对于选项过多的场景,考虑使用下拉列表,相对于显示所有的选项占用更少的空间。
组件示例
组件属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
behavior | 表单组件显示状态 | 'NORMAL' | |
customRender | 定制渲染 | (item: DataSource) => ReactNode | - |
dataSource | 待选项 |
| |
iconPosition | 手机端Icon位置,仅手机端生效 | 'left' | 'right' | 'left' |
itemDirection | PC端选项排列方式 | 'hoz' | 'ver' | 'hoz' |
label | 表单组件标题 | string | - |
labelAlign | 表单组件标题的位置 | 'left' | 'top' | 'top' |
labelColOffset | 设置标题的偏移位置,配置值为栅格值,1代表1/24 | number | 0 |
labelColSpan | 设置标题的占位宽度,配置值为栅格值,1代表1/24 | number | 4 |
labelTextAlign | 表单组件的标题对齐方式 | 'left' | 'right' | 'right' |
labelTipsIcon | 表单组件标题提示信息入口图标,当labelTipsTypes取值为 text 或 render 时生效 | string | - |
labelTipsRender | 表单组件标题提示信息自定义渲染方法,当labelTipsTypes取值为 render 时生效 | (props: IComponentProps) => ReactNode | - |
labelTipsText | 表单组件标题提示文本信息,当labelTipsTypes取值为 text 时生效 | string | - |
labelTipsTypes | 表单组件标题提示信息类型设置 | 'none' | |
onChange | 组件值发生改变事件 | (value: string) => void | - |
shape | 展示形状 | 'default' | 'button' | 'default' |
size | 表单组件尺寸 | 'medium' | |
supportInverse | 是否支持反选,再次点击选项可取消选择 | boolean | false |
tips | 表单组件描述信息,展示在控件下方 | string | - |
useDrawerInMobile | 手机端排列方式,为true则直接平铺,为false则底部弹层 | boolean | false |
validation | 表单组件校验设置,具体使用详见表单校验文档 | [] | |
value | 默认值 | string | '选项一' |
wrapperColOffset | 设置表单组件的偏移位置,设置值为栅格值,1代表1/24 | number | 0 |
wrapperColSpan | 设置表单组件的占位宽度,设置值为栅格值,1代表1/24 | number | 0 |
本文档对您是否有帮助?