Radio 单选框

基本单选框

每个都是独立的单选按钮，各自需要单独绑定一个 model

<at-radio v-model="radio" label="1">选项一</at-radio>
<at-radio v-model="radio" label="2">选项二</at-radio>

不可用状态

添加属性 disabled，设置按钮不可用

<at-radio v-model="radio2" label="3" disabled>不可点且未选中</at-radio>
<at-radio v-model="radio2" label="4" disabled>不可点且选中</at-radio>

单选框组合

如果按钮存在互斥的情况，可用单选框组，但如果选项过多，建议使用下拉框组件。使用组合：AtRadioGroup 和 AtRadio

<at-radio-group v-model="radio3">
  <at-radio label="1">选项一</at-radio>
  <at-radio label="2">选项二</at-radio>
  <at-radio label="3">选项三</at-radio>
</at-radio-group>

组合按钮

按钮样式的单选框组合，使用组合：AtRadioGroup 和 AtRadioButton

<at-radio-group v-model="radio4">
  <at-radio-button label="北京">北京</at-radio-button>
  <at-radio-button label="上海" disabled>上海</at-radio-button>
  <at-radio-button label="深圳">深圳</at-radio-button>
  <at-radio-button label="凹凸实验室">凹凸实验室</at-radio-button>
</at-radio-group>

自定义组合按钮样式

设置 fill 属性可更改选中按钮的背景颜色，设置 text-color 属性可更改选中按钮字体的颜色

<p class="demo-desc">更换背景色</p>
<div class="row">
  <at-radio-group v-model="radio5" fill="#FF6464">
    <at-radio-button label="北京">北京</at-radio-button>
    <at-radio-button label="上海" disabled>上海</at-radio-button>
    <at-radio-button label="深圳">深圳</at-radio-button>
    <at-radio-button label="凹凸实验室">凹凸实验室</at-radio-button>
  </at-radio-group>
</div>
<p class="demo-desc">更换字体颜色</p>
<div class="row">
  <at-radio-group v-model="radio5" text-color="#4C5D73">
    <at-radio-button label="北京">北京</at-radio-button>
    <at-radio-button label="上海" disabled>上海</at-radio-button>
    <at-radio-button label="深圳">深圳</at-radio-button>
    <at-radio-button label="凹凸实验室">凹凸实验室</at-radio-button>
  </at-radio-group>
</div>

不同大小的组合按钮

提供大中小三种尺寸的组合按钮

<div class="row">
  <at-radio-group v-model="radio6" size="large">
    <at-radio-button label="北京">北京</at-radio-button>
    <at-radio-button label="上海" disabled>上海</at-radio-button>
    <at-radio-button label="深圳">深圳</at-radio-button>
    <at-radio-button label="凹凸实验室">凹凸实验室</at-radio-button>
  </at-radio-group>
</div>
<div class="row">
  <at-radio-group v-model="radio6" size="normal">
    <at-radio-button label="北京">北京</at-radio-button>
    <at-radio-button label="上海" disabled>上海</at-radio-button>
    <at-radio-button label="深圳">深圳</at-radio-button>
    <at-radio-button label="凹凸实验室">凹凸实验室</at-radio-button>
  </at-radio-group>
</div>
<div class="row">
  <at-radio-group v-model="radio6" size="small">
    <at-radio-button label="北京">北京</at-radio-button>
    <at-radio-button label="上海" disabled>上海</at-radio-button>
    <at-radio-button label="深圳">深圳</at-radio-button>
    <at-radio-button label="凹凸实验室">凹凸实验室</at-radio-button>
  </at-radio-group>
</div>

Radio 参数

Radio Button 参数

Radio Group 参数

Radio Group 事件