复选框组件 Checkbox-Group

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

复选框 Checkbox

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

基础案例

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

示例代码

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

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

单个Checkbox布局方式

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

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

多个Checkbox布局方式

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

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

示例代码

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

设置选中项

当我们需要将某一个Checkbox设置为当前选中项时，需要将当前checkbox的value值添加到 Checkbox-Group的current属性当中，current接收一个数组。

注意事项

Checkbox-Group的current属性的类型是数组。

示例代码

<l-checkbox-group current="['中国']" bind:linchange="onChangeTap" >
  <l-checkbox  value="中国" />
  <l-checkbox  value="美国" />
</l-checkbox-group>

设置选中项的颜色

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

示例代码

<l-checkbox value="中国"  color="red" />

设置禁用

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

示例代码

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

自定义checkbox的内容部分

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

示例代码

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

注意事项

插入slot的时候，也需要设置value，这个value不会显示，但是会在你更改选中项的时候，用过linchange事件返回。用来通知开发者当前选中的是什么。

复选框组件属性（Checkbox Attributes）

复选框容器组件属性 (Checkbox-Group Attributes）

复选框组件事件 (Checkbox-Group Events）