hae/src/components/radio/metas.yml

Mobile web UI based on Vux

category:
  en: Form
  'zh-CN': 表单
icon: ''
tags:
  en:
    - radio
    - form
  zh-CN:
    - 表单
    - 单选
extra:
  en: |

    ```html
      <group>
        <radio title="title" :options="options" v-model="value"></radio>
      </group>
    ```
    `options` can be plain array, or object list with key=> value:

    ``` js
    const options = [ 'China', 'Japan' ]

    const options2 = [{
      icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
      key: '001',
      value: 'radio001'
    }, {
      icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
      key: '002',
      value: 'radio002'
    }]
    ```

    ::: tip
    `radio` should be used in `Group`.
    :::
  zh-CN: |

    ```html
      <group>
        <radio title="title" :options="options" v-model="value"></radio>
      </group>
    ```
    `options`可以为简单数组，也可以为key=>value形式键值对

    ``` js
    const options = [ 'China', 'Japan' ]

    const options2 = [{
      icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
      key: '001',
      value: 'radio001'
    }, {
      icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
      key: '002',
      value: 'radio002'
    }]
    ```

    ::: tip
    `radio`只能在`Group`中使用
    :::
props:
  value:
    en: radio value, use `v-model` for binding
    zh-CN: 表单值，使用`v-model`绑定
  options:
    type: Array
    en: option list, can be plain array or array with `key=>value`
    zh-CN: 可选列表，可以用字符串组成的数组或者 `key=>value` 的形式
  fill-mode:
    type: Boolean
    default: false
    en: if add an option user can fill
    zh-CN: 是否可填写
  fill-placeholder:
    en: placeholder for fill input
    zh-CN: 可填写时的提示文字
  fill-label:
    en: label for fill input
    zh-CN: 可填写时的label文字
  disabled:
    type: Boolean
    version: v2.3.8
    en: disable selecting
    zh-CN: 禁用操作
  selected-label-style:
    type: Object
    version: v2.4.0
    en: set selected label style
    zh-CN: 设置选中时的 label 样式，比如使用其他颜色更容易区分是否为选中项
slots:
  each-item:
    version: v2.3.5
    en: custom how to display each item
    zh-CN: 自定义如何显示每一项
changes:
  v2.4.0:
    en:
      - '[feature] Add prop:selected-label-style'
    zh-CN:
      - '[feature] 添加属性 prop:selected-label-style 来支持定义选中项的文字样式'
  v2.3.8:
    en:
      - '[feature] Add prop:disabled #1254'
      - '[feature] Add less:@radio-checked-icon-color #896'
    zh-CN:
      - '[feature] 支持 prop:disabled 禁用操作 #1254'
      - '[feature] 支持 less 变量 @radio-checked-icon-color #896'
  v2.3.5:
    en:
      - '[feature] Support slot:each-item'
    zh-CN:
      - '[feature] 支持自定义渲染每一列 slot:each-item'
  v2.1.1-rc.13:
    en:
      - '[fix] Fix not support Number and not reactive #1115'
    zh-CN:
      - '[fix] 修复未响应数据变更的 bug #1115'
  v2.1.1-rc.1:
    en:
      - '[feature] Support icon'
    zh-CN:
      - '[feature] 支持左侧图标'