单项选择器 Radio-Group

单项选择器，与原生组件Radio-Group用法类似，内部由多个l-radio组件组成。

单选项目 Radio

单选项目，与原生组件Radio用法类似，内部可传入slot。与Radio-Group搭配使用。

基础案例

单项选择器内部由多个l-radio组成，linchange事件能监听到选中项的变化。

示例代码

<l-radio-group current="{{current}}" bind:linchange="onChangeTap" >
  <l-radio
    wx:for-items="{{items}}"
    wx:key="{{item.value}}"
    value="{{item.value}}"
    disabled="{{item.disabled}}">
  </l-radio>
</l-radio-group>

  data: {
    current: '中国',
    items: [
      { value: '美国' },
      { value: '中国' },
      { value: '巴西' },
      { value: '日本' },
      { value: '英国' },
      { value: '法国' },
    ]
  }

根据具体需求，选择最佳的标签对齐方式（输入框标题和输入框部分）。

placement 默认值是 left ，即radio的选中图标居左显示。值为 right 时，图标居右显示。

单个Radio布局方式

根据具体需求，选择最佳的标签对齐方式（选中图标和内容部分）。

placement 默认值是 left ，即Radio的选中图标居左显示。值为 right 时，图标居右显示。

多个Radio布局方式

根据具体需求，选择最佳的多个Radio组件对齐方式，需要设置Radio-Group组件的placement属性。

placement 默认值是 column ，可选项为 row/column。

示例代码

<l-radio-group bind:linchange="onChangeTap" >
  <l-radio  placement="right"  value="中国" /> 
</l-radio-group>

设置选中项

当我们需要将某一个Radio设置为当前选中项时，需要将当前Radio的value值传递到 Radio-Group的current属性当中，current接收字符串。

注意事项

Radio-Group的current属性的类型是字符串。

示例代码

<l-radio-group current="中国" bind:linchange="onChangeTap" >
  <l-radio  value="中国" />
  <l-radio  value="美国" />
</l-radio-group>

设置选中项的颜色

当我们需要改变radio选中时的颜色时，可以通过color 属性来设置

示例代码

<l-radio value="中国"  color="red">

设置禁用

当我们需要将某一个选项禁用时，设置 disabled 为 true 即可。

示例代码

<l-radio value="中国"  disabled="{{true}}" >

自定义Radio的内容部分

通过 <slot> 的方式可以自定义Radio组件的右边部分，在此之前需要将custom设置为true

示例代码

<l-radio   custom="{{true}}"  disabled="{{true}}" >
  <view>
    <image src="path/to/img.png" class="img"/>
    <text>中国</text>
  </view>
</l-radio>

单选组件属性（Radio Attributes）

单项选择器组件属性（Radio-Group Attributes）

单项选择器事件 (Radio-Group Events）