如何设置单选框RadioGroup_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

在一组可选项中进行单选，通过 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 色值	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) => 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 组件样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="基础用法">
    <radio-group  
      value="选项二"
      uid="basic"
      onChange="handleChange">
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="basic">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
  <demo-block title="横向布局">
    <radio-group  
      value="选项二"
      uid="horizontal"
      position="horizontal"
      onChange="handleChange">
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="horizontal">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
  <demo-block title="包含禁用项">
    <radio-group  
      uid="basic1"
      value="banner"
      onChange="handleChange">
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="basic1" disabled="{{index===1}}">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
  <demo-block title="整体禁用">
    <radio-group  
      uid="basic2"
      value="banner"
      disabled>
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="basic2">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    list: [
      { value: 'apple', label: '苹果' },
      { value: 'orange', label: '橘子' },
      { value: 'banana', label: '香蕉' },
    ],
  },
  handleChange(e) {
    console.log(e);
  },
});

index.acss 的代码示例如下：

.btns {
  display: flex;
  padding: 0 24rpx 24rpx;
  justify-content: space-between;
}

.btns button {
  flex: 1;
  margin-right: 12rpx;
}

.btns button ~button {
  margin-right: 0;
  margin-left: 12rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "RadioGroup",
  "usingComponents": {
    "radio-group": "antd-mini/es/RadioGroup/index",
    "radio-item": "antd-mini/es/RadioGroup/RadioItem/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}