跳到主要内容

RadioField 单选

何时使用

  • 单选框允许用户从一个数据集中选择单个选项。面向用户需要并排看到所有的可选项,并使用单选框进行排他操作的场景。
  • 对于选项过多的场景,考虑使用下拉列表,相对于显示所有的选项占用更少的空间。

组件示例

组件属性

属性说明类型默认值
behavior

表单组件显示状态

Behavior

'NORMAL'

customRender

定制渲染

(item: DataSource) => ReactNode

-
dataSource

待选项

DataSource[]

[
  {
    "text": "选项一",
    "value": "1"
  },
  {
    "text": "选项二",
    "value": "2"
  },
  {
    "text": "选项三",
    "value": "3"
  }
]
      
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取值为 textrender 时生效

string

-
labelTipsRender

表单组件标题提示信息自定义渲染方法,当labelTipsTypes取值为 render 时生效

(props: IComponentProps) => ReactNode

-
labelTipsText

表单组件标题提示文本信息,当labelTipsTypes取值为 text 时生效

string

-
labelTipsTypes

表单组件标题提示信息类型设置

LabelTipsTypes

'none'

onChange

组件值发生改变事件

(value: string) => void

-
shape

展示形状

'default' | 'button'

'default'

size

表单组件尺寸

Size

'medium'

supportInverse

是否支持反选,再次点击选项可取消选择

boolean

false

tips

表单组件描述信息,展示在控件下方

string

-
useDrawerInMobile

手机端排列方式,为true则直接平铺,为false则底部弹层

boolean

false

validation

表单组件校验设置,具体使用详见表单校验文档

Validation[]

[]

value

默认值

string

'选项一'

wrapperColOffset

设置表单组件的偏移位置,设置值为栅格值,1代表1/24

number

0

wrapperColSpan

设置表单组件的占位宽度,设置值为栅格值,1代表1/24

number

0

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4