单项选择器 Radio-Group

单选组：l-radio-group。作为多个单选项目的父容器，用过来控制单选逻辑，内部由多个l-radio组件组成。

单选项目 Radio

单选项目，l-radio。必须与Radio-Group搭配使用。

基本常识

l-radio必须与l-radio-group搭配使用，且每个l-radio必须指定一个key作为单选项目的唯一标识。

基础案例

单选组内部由多个l-radio组成，注意设置key。如果你的数据是动态，也可以使用wx:for进行列表渲染，通常key应该设置为 真实数据的id号，或者是数组的序号index。

示例代码

<l-radio-group>
    <l-radio key="1">七秀</l-radio>
    <l-radio key="2">五毒</l-radio>
    <l-radio key="3">长歌</l-radio>
</l-radio-group>

两种模式与选中项

TIP

单选组件支持两种模式：

1. 可以全部不选中
2. 至少选中1项

模式1 是默认模式。模式1支持反选，当一个radio被选中时，再次点击将取消选中，但模式2不可以。 将l-radio-group上设置none-checked属性设置为false可以切换到模式2。 对于模式2，为保证初始化时至少有一项被选中，l-radio-group必须设置current属性，current属性可以设置为任何一个l-radio的key。 这样，在初始化时，组件将对应的key的l-radio设置为选中状态。 注意，模式1同样可以设置current，但这不是必须的。

示例代码

<l-radio-group current="2" none-checked="{{false}}">
    <l-radio key="1">七秀</l-radio>
    <l-radio key="2">五毒</l-radio>
    <l-radio key="3">长歌</l-radio>
</l-radio-group>

设置radio-group布局方式

通过placement属性设置radio-group布局方式。

示例代码

<l-radio-group placement="column">
    <l-radio key="1">七秀</l-radio>
</l-radio-group>

设置radio布局方式

通过placement属性设置radio布局方式。

示例代码

<l-radio-group>
    <l-radio key="1" placement="right">七秀</l-radio>
</l-radio-group>

设置选中项的颜色及大小

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

通过size属性设置radio图标大小。

示例代码

<l-radio color="red" size="32" select-color="green">
长歌
</l-radio>

设置禁用

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

示例代码

<l-radio disabled="{{true}}">
七秀
</l-radio>

自定义Radio的内容部分

通过 <slot> 的方式可以自定义Radio组件的内容部分。

通过设置custom属性自定义左侧图标。

示例代码

<l-radio custom="{{true}}">
    <image slot="custom" src="path/to/img.png" class="img"/>
    <text>七秀</text>
</l-radio>

单选组件属性（Radio Attributes）

单选组件外部样式类（Radio ExternalClasses）

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

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