RadioGroup 单选框
在一组可选项中进行单选,通过value来指定选中项
何时使用
Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多
代码示例
基本使用
属性
RadioGroup
属性 | 说明 | 类型 | 默认值 |
---|
value | RadioGroup 的值,决定子元素是否勾选 | string | - |
radius | 是否带圆角 | boolean | false |
position | 布局 | 'horizontal' | 'vertical' | 'vertical' |
uid | 当页面有多个RadioGroup时需传入,必须页面唯一 ,与内部的 RadioItem 组件的 uid 一致 | string | - |
header | 头部说明 | string | - |
footer | 底部说明 | string | - |
disabled | 是否整体禁用 | boolean | false |
className | 类名 | string | - |
RadioItem
属性 | 说明 | 类型 | 默认值 |
---|
value | Radio 携带的 value 值, 在原生 form 表单提交的时候有用;在 RadioGroup 时亦有用 | any | - |
color | 选中的颜色,同 CSS 色值 ,同 CSS 色值 | string | false |
disabled | 是否禁用 | boolean | false |
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-body | radio-group 区域样式 |
amd-radio-group-footer | 底部说明区域样式 |
RadioItem
类名 | 说明 |
---|
amd-radio-item-wrap | 整体样式 |
amd-radio-item-base | radio 组件样式 |
amd-radio-item-fake | 选中状态下 radio 组件样式 |