RadioGroup 单选框

在一组可选项中进行单选,通过value来指定选中项

何时使用

Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多

代码示例

基本使用

属性

RadioGroup

属性说明类型默认值
valueRadioGroup 的值,决定子元素是否勾选string-
radius是否带圆角booleanfalse
position布局'horizontal' | 'vertical''vertical'
uid当页面有多个RadioGroup时需传入,必须页面唯一,与内部的 RadioItem 组件的 uid 一致string-
header头部说明string-
footer底部说明string-
disabled是否整体禁用booleanfalse
className类名string-

RadioItem

属性说明类型默认值
valueRadio 携带的 value 值, 在原生 form 表单提交的时候有用;在 RadioGroup 时亦有用any-
color选中的颜色,同 CSS 色值 ,同 CSS 色值stringfalse
disabled是否禁用booleanfalse
icon自定义未选中图标,支持Icon和图片路径string-
checkedIcon自定义选中状态的图标,支持Icon和图片路径string-
disabledIcon自定义禁用状态的图标,支持Icon和图片路径string-
disabledCheckedIcon自定义禁用选中状态的图标,支持Icon和图片路径string-
uid当页面有多个RadioGroup时需传入,必须页面唯一,需与外部的 RadioGroup 组件的 uid 一致string-
className类名string-

事件

RadioGroup

事件名说明类型
onChange选中项发生变化,触发回调(value: any, event: Event) => void

插槽

RadioGroup

插槽名说明
header头部说明
footer底部说明

样式类

RadioGroup

类名说明
amd-radio-group整体样式
amd-radio-group-header头部说明区域样式
amd-radio-group-bodyradio-group 区域样式
amd-radio-group-footer底部说明区域样式

RadioItem

类名说明
amd-radio-item-wrap整体样式
amd-radio-item-baseradio 组件样式
amd-radio-item-fake选中状态下 radio 组件样式