Honeycomb Design

# 单选框 Radio

在一组备选项中进行单选

# 基础用法

备选项 1 备选项 2
基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

<title>基础用法</title>
<describe>由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。</describe>
<template>
    <hc-radio :label="1" v-model="radio">备选项 1</hc-radio>
    <hc-radio :label="2" v-model="radio">备选项 2</hc-radio>
</template>
<script>
export default {
  data: function() {
    return {
      radio: 1
    }
  }
}
</script>

# 禁用状态

备选项1 备选项 2
禁用状态

单选框不可用状态。

<title>禁用状态</title>
<describe>单选框不可用状态。</describe>
<template>
    <hc-radio :label="1" v-model="radio" disabled>备选项1</hc-radio>
    <hc-radio :label="2" v-model="radio" disabled>备选项 2</hc-radio>
</template>
<script>
export default {
  data: function() {
    return {
      radio: 1
    }
  }
}
</script>

# 单选框组

备选项1 备选项2 备选项3
单选框组

适用于在多个互斥的选项中选择的场景

<title>单选框组</title>
<describe>适用于在多个互斥的选项中选择的场景</describe>
<template>
    <hc-radio-group v-model="radioGroup">
      <hc-radio label="1" disabled>备选项1</hc-radio>
      <hc-radio label="2">备选项2</hc-radio>
      <hc-radio label="3">备选项3</hc-radio>
    </hc-radio-group>
</template>
<script>
export default {
  data: function() {
    return {
      radioGroup: '2'
    }
  }
}
</script>

# 单选框组只读模式

备选项1 备选项2 备选项3
单选框组只读模式

单选框组不可用状态。

<title>单选框组只读模式</title>
<describe>单选框组不可用状态。</describe>
<template>
    <hc-radio-group v-model="radioGroup" :mode="3">
      <hc-radio label="1">备选项1</hc-radio>
      <hc-radio label="2">备选项2</hc-radio>
      <hc-radio label="3">备选项3</hc-radio>
    </hc-radio-group>
</template>
<script>
export default {
  data: function() {
    return {
      radioGroup: '2'
    }
  }
}
</script>

# Radio属性

属性 说明 类型 可选值 默认值
name 原生 name 属性 string -- ----
value 当前值，支持v-model方式使用 string / number / boolean -- --
label Radio 的 value string / number / boolean -- --
mode 编辑模式，2为编辑模式，3为只读模式 string 2，3 2
disabled 是否禁用 boolean -- false

# Radio事件

事件 说明 回调参数
change 用户选择值确认时触发 {value: 值}

# RadioGroup属性

属性 说明 类型 可选值 默认值
value 当前值，支持v-model方式使用 string -- --
mode 编辑模式，2为编辑模式，3为只读模式 string 2，3 2
viewable 是否查看状态 boolean -- false

# RadioGroup事件

事件 说明 回调参数
change 用户选择值确认时触发 {value: 值}

← 多选框 CheckBox →