跳到主要内容
Radio
单选按钮为用户提供了一组互斥的选项，它们允许用户仅从两个或多个选项中选择一个选项。每个选项都由一个单选按钮组成，因此，单选按钮只能成组使用。
用法
样式
可访问性

示例​

注意​

  • 本组件是Radio组，而不是单个的Radio。
  • 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

基础用法​

Radio 单选组有三种状态：默认、选中、禁用。对单个Radio支持配置tips添加说明。禁用和提示在data中配置。

PCPhonePad
   <page>
     <module title="基础用法">
       <form
           layout="horizontal"
           confirm-button="{{false}}"
           clear-button="{{false}}"
         >
           <item
             label="你喜欢什么瓜？"
             node="radio"
             name="a"
             data="{[
               {value: 1, label: '选择呆瓜',  tips: '呆瓜详细说明'},
               {value: 2, label: '选择西瓜', disabled: true},
               {value: 3, label: '选择傻瓜'}
             ]}"
             before-change="{{beforeChange}}"
             bindchanged="handleRadioAChanged"
           />
           <item
             label="你喜欢什么蛋？"
             node="radio"
             name="b"
             label-size="{{0}}"
             value="{{1}}"
             data="{[
               {value: 1, label: '选择笨蛋'},
               {value: 2, label: '选择鸡蛋', disabled: true},
               {value: 3, label: '选择傻蛋'}
             ]}"
             bindchanged="handleRadioBChanged"
           />
       
         </form>
       </module>    
   </page>

export default XPage({
    handleRadioAChanged(value) {
        console.info('a checked', value);
    },

    handleRadioBChanged(value) {
        console.info('b checked', value);
    },

    beforeChange(newValue, oldValue) {
        return new Promise((resolve) => {
            CabinX.confirm({
                title: '提示',
                text: `是否将值从${oldValue} 调整为 ${newValue}`,
            }, resolve);
        });
    },
});



展示类型​

Radio 单选组支持多种展示类型，当displayType为image时data中需要配置url。

PCPhonePad
<page>
  <module title="切换展示类型(displayType)">
    <actions>
      <button text="默认复选框" bindclick="changeDisplayType('normal')"></button>
      <button text="按钮组" bindclick="changeDisplayType('button')"></button>
      <button text="分开按钮组" bindclick="changeDisplayType('split-button')"></button>
      <button text="内嵌按钮组" bindclick="changeDisplayType('insert-button')"></button>
      <button text="图片" bindclick="changeDisplayType('image')"></button>
      <button text="卡片" bindclick="changeDisplayType('card')"></button>
    </actions>
    <form>
      <item node="radio" label-size={{0}} value="{{defaultValue}}" data="{{options}}" display-type="{{displayType}}" ></item>
      <item node="radio" label-size={{0}} value="{{defaultValue}}" data="{{options}}" display-type="{{displayType}}" ></item>
    </form>
  </module>
</page>


export default XPage({
  data: {
      displayType: 'button',
      options: [
          {
              label: '苹果',
              value: '1',
              description: '酸酸甜甜',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '橘子',
              value: '2',              
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '西瓜',
              value: '3',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '猪肉',
              value: '4',
              disabled: true,
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '草莓',
              value: '5',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '压力',
              value: '7',
              disabled: true,
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '鸭梨',
              value: '8',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
      ],
      defaultValue: '2',
      message: '',
  },
  changeDisplayType(type) {
      this.setData({
          displayType: type,
      });
  },
});



布局​

Radio 单选组支持水平和垂直两种布局。itemWidth属性可控制每个Radio的宽度。

PCPhonePad
  <page>
    <module title="切换布局和宽度(layout和item宽度)">
      <actions>
        <select placeholder="请选择layout" 
                data="{[{label:'横',value:'horizontal'},{label:'竖',value:'vertical'}]}" 
                bindchanged="changeLayout">
        </select>
        <select placeholder="请选择宽度" 
                data="{[{label:'S(108px)',value:'S'},{label:'M(144px)',value:'M'},{label:'L(216px)',value:'L'},{label:'auto(不固定宽度)',value:'auto'}]}" 
                bindchanged="changeItemWidth">
        </select>
      </actions>
      <form>
        <item node="radio" label="水果" value="{{defaultValue}}" data="{{options}}" layout="{{layout}}" itemWidth="{{itemWidth}}"></item>
      </form>
    </module>
  </page>


export default XPage({
  data: {
      options: [
          {
              label: '苹果',
              value: '1',
              description: '酸酸甜甜'
          },
          {
              label: '橘子',
              value: '2',
          },
          {
              label: '西瓜',
              value: '3',
          },
          {
              label: '猪肉',
              value: '4',
              disabled: true,
          },
          {
              label: '草莓',
              value: '5',
          },
          {
              label: '压力',
              value: '7',
              disabled: true,
          },
          {
              label: '鸭梨',
              value: '8',
          },
      ],
      defaultValue: '2',
      layout:'horizontal',
      itemWidth:'S'
  },
  show() {
  },
  changeItemWidth(itemWidth) {
    this.setData({itemWidth:itemWidth});
      
  },
  changeLayout(layout){
    this.setData({layout:layout});
  }
});



Attributes​

属性说明类型可选值默认值端版本
name名称String----PC/Mobile--
value绑定值String / Number----PC/Mobile--
data选项Array<{label, value, disabled, url, description, tips}>----PC/Mobile--
disabled禁用Boolean--falsePC/Mobile--
displayType显示的样式Stringnormal/button/split-button/insert-button/card/imagenormalPC--
layout排列方式(横竖)Stringhorizontal/verticalhorizontalPC--
itemWidth选项的宽度StringS(108px)/M(144px)/L(216px)/auto(选项宽度)SPC--
beforeChange改变前钩子函数Function(newValue: any, oldValue: any): Boolean/Promise--PC/Mobile--
notCabinxTag如果需要用原生标签，可以使用这个参数，编译器将不会对 radio 转成 x-radio 。注意，这个标签只在命令行编译阶段生效，而不是运行阶段，所以，赋值对他是没有用的------PC/Mobile--

Attributes - data​

属性说明类型可选值默认值端版本
label文案String----PC/Mobile--
value值String----PC/Mobile--
disabled禁用Boolean--falsePC/Mobile--
tips提示String----PC--
url图片地址，当displayType为image时有用String----PC--
description描述String----PC--

Events​

名称说明回调参数端版本
changed值改变后触发(value, [{label,value,...}])PC/Mobile--