Mind UI

# Radio 单选框

# 介绍

用于在多个选项中选择单个结果。

# 引入

"usingComponents": {
  "m-radio-group": "/dist/radio-group/index",
  "m-radio": "/dist/radio/index"
}

# 示例

# 基础用法

<m-radio-group value="{{ radio }}" bind:change="onChange">
  <m-radio name="选项1" custom-class="custom-radio">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

# 禁用

<m-radio-group disabled value="{{ radio }}" bind:change="onChange">
  <m-radio name="选项1" custom-class="custom-radio">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

# 自定义选中颜色

<m-radio-group checked-color="#00CDA2" value="{{ radio }}" bind:change="onChange">
  <m-radio name="选项1" custom-class="custom-radio">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

# 与单元格一起使用

<m-radio-group value="{{ radio }}" bind:change="onChange">
  <m-cell icon="feed" title="选项1">
    <m-radio name="选项1" />
  </m-cell>
  <m-cell icon="feed" title="选项2">
    <m-radio name="选项2" />
  </m-cell>
</m-radio-group>

Page({
  data: {
    radio: ''
  },

  onChange({ detail }) {
    this.setData({
      radio: detail
    })
  }
})

# Api

# RadioGroup Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String — —
checked-color 选中状态颜色 String — —
value 选中项 name 值 Boolean — —
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false

# Group Events

方法名称 说明 值
change 选中值变更时触发回调 event.detail 当前选中项 name

# Radio Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String — —
checked-color 选中状态颜色，优先级高于 group String — —
value 选中项 name 值 Boolean — —
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false

# Radio Events

方法名称 说明 值
change 选中值变更时触发回调 event.detail 当前选中项 name

# Slot

名称 说明
— label 内容

← CheckBox 多选框 →