Appearance

iuiDesign
100%
02:32
本页目录

在一组相关且互斥数据中，用户仅能选择一个选项。

基本使用 ​

单选框的基本用法。一般不会单独使用，而是作为 radio-group 的子组件使用。

html
<iui-radio label="Opiton Content" justify></iui-radio>
<iui-radio label="Opiton Content" justify></iui-radio>

禁用状态 ​

禁用单选框。

html
<iui-radio label="Opiton Content" justify disabled></iui-radio>
<iui-radio label="Opiton Content" justify disabled></iui-radio>

单选框组 ​

通过 raido-group 组件展示单选框组。

html
<iui-radio-group>
  <iui-space size="medium" direction="vertical">
    <view>
      <iui-radio label="Option 1"></iui-radio>
    </view>
    <view>
      <iui-radio label="Option 2"></iui-radio>
    </view>
  </iui-space>
</iui-radio-group>
<iui-radio-group>
  <iui-space size="medium" direction="vertical">
    <view>
      <iui-radio label="Option 1"></iui-radio>
    </view>
    <view>
      <iui-radio label="Option 2"></iui-radio>
    </view>
  </iui-space>
</iui-radio-group>

在列表中使用 ​

在列表中使用时，推荐使用通栏模式，label 显示在左侧， 选择器显示在右侧。

html
<iui-radio-group justify>
  <iui-list>
    <iui-cell>
      <iui-radio label="Option 1"></iui-radio>
    </iui-cell>
    <iui-cell>
      <iui-radio label="Option 2"></iui-radio>
    </iui-cell>
  </iui-list>
</iui-radio-group>
<iui-radio-group justify>
  <iui-list>
    <iui-cell>
      <iui-radio label="Option 1"></iui-radio>
    </iui-cell>
    <iui-cell>
      <iui-radio label="Option 2"></iui-radio>
    </iui-cell>
  </iui-list>
</iui-radio-group>

API ​

<radio>props
参数描述类型默认值
modelValue (v-model)是否选中Booleanfalse
disabled是否禁用Booleanfalse
label标签String -
value选中时的值String | Number | Boolean-
color选择器颜色String-
checked默认选中Booleanfalse
justify通栏Booleanfalse
<radio>events
事件名描述参数
change选中状态切换时触发
<radioGroup>props
参数描述类型默认值
modelValue (v-model)选中的值String | Number | Boolean-
justify通栏Booleanfalse
<radioGroup>events
事件名描述参数
change选中值变化时触发modelValue: Array