| 参数 | 说明 | 类型 | 默认值 |
| id | 组件radio的id | String | - |
| checked | 设置radio是否选中 | Boolean | - |
| defaultChecked | 设置radio是否默认选中 | Boolean | - |
| onChange | 状态变化时触发的事件 签名: Function(checked: Boolean, e: Event) => void 参数: checked: {Boolean} 是否选中 e: {Event} Dom 事件对象 |
Function | func.noop |
| disabled | radio是否被禁用 | Boolean | - |
| value | radio 的value | String/Number/Boolean | - |
| name | name | String | - |
| 参数 | 说明 | 类型 | 默认值 |
| name | name | String | - |
| size | 与 shape 属性配套使用，shape设为button时有效可选值: 'large'(大) 'medium'(中) 'small'(小) |
Enum | 'medium' |
| shape | 可以设置成 button 展示形状 可选值: 'button'(按钮状) |
Enum | - |
| value | radio group的选中项的值 | String/Number/Boolean | - |
| defaultValue | radio group的默认值 | String/Number/Boolean | - |
| onChange | 选中值改变时的事件 签名: Function(value: String/Number, e: Event) => void 参数: value: {String/Number} 选中项的值 e: {Event} Dom 事件对象 |
Function | () => {} |
| disabled | 表示radio被禁用 | Boolean | - |
| dataSource | 可选项列表, 数据项可为 String 或者 Object, 如 ['apple', 'pear', 'orange'] |
Array<any> | [] |
| itemDirection | 子项目的排列方式 - hoz: 水平排列 (default) - ver: 垂直排列 可选值: 'hoz', 'ver' |
Enum | 'hoz' |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <view class="com-wrap"> <view class="com-title">基本</view> <view class="com-sub-title">Without Label</view> <radio defaultChecked /> <radio checked /> <radio disabled /> <radio checked disabled /> <radio /> <view class="com-sub-title">With Label</view> <radio >Apple</radio> <radio /><label htmlFor="banana" className="next-radio-label">Banana</label> <radio label="Apple" className="testClassname" /> <view class="com-title">受限组件</view> <view class="com-sub-title">normal:</view> <radio-group dataSource="{{list}}" value="{{value}}" onChange="onChange" /> <view class="com-sub-title">disabled:</view> <radio-group disabled dataSource="{{list}}" value="{{value}}" onChange="onChange" /> <view class="com-title">分组</view> <!-- <view class="com-sub-title">Choose a shape</view> <radio-group shape="button" value="{{shape}}" onChange="onShapeChange"> <radio value="normal">Normal</radio> <radio value="button">Button</radio> </radio-group> --> <view class="com-sub-title">Choose an align-type of the item</view> <radio-group shape="button" value="{{itemDirection}}" onChange="onItemDirectionChange"> <radio value="hoz">Horizon</radio> <radio value="ver" disabled a:if="{{shape === 'button'}}">Vertical</radio> <radio value="ver" a:else >Vertical</radio> </radio-group> <view className="rendered-container"> <view class="com-sub-title">Rendered Result</view> <radio-group shape="{{shape}}" itemDirection="{{itemDirection}}" > <radio value="react">React</radio> <radio value="vue">Vue</radio> <radio value="angular">Angular</radio> </radio-group> </view> <view class="com-title">非受限组件</view> <radio-group dataSource="{{list}}" defaultValue="apple" /> <view class="com-title">非受限组件</view> <view class="com-sub-title">Small size</view> <radio-group dataSource="{{list}}" shape="button" size="small" value="{{value1}}" onChange="onSmallChange" /> <view class="com-sub-title">Medium size (default)</view> <radio-group dataSource="{{list}}" shape="button" size="medium" value="{{value2}}" onChange="onMediumChange" /> <view class="com-sub-title">Large size</view> <radio-group shape="button" size="large" value="{{value3}}" onChange="onNestChange"> <radio value="banana">Banana</radio> <radio value="watermelon">Watermelon</radio> <radio value="peach">Peach</radio> </radio-group> <view class="com-sub-title">Disabled and Selected-Disabled status</view> <radio-group shape="button" value="banana" onChange="onNestChange"> <radio disabled value="peach">Peach</radio> <radio disabled value="banana">Banana</radio> </radio-group> </view> |
