59 lines
1.9 KiB
Plaintext

<demo-block title="基本用法">
<van-checkbox value="{{ checkbox1 }}" data-key="checkbox1" bind:change="onChange" custom-class="demo-checkbox">复选框</van-checkbox>
</demo-block>
<demo-block title="禁用状态">
<van-checkbox value="{{ false }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
<van-checkbox value="{{ true }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
</demo-block>
<demo-block title="自定义图标">
<van-checkbox value="{{ checkbox2 }}" data-key="checkbox2" bind:change="onChange" use-icon-slot custom-class="demo-checkbox">
自定义图标
<image mode="widthFix" slot="icon" src="{{ checkbox2 ? icon.active : icon.normal }}" class="icon" />
</van-checkbox>
</demo-block>
<demo-block title="Checkbox 组">
<van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
<van-checkbox
wx:for="{{ list }}"
wx:key="{{ index }}"
name="{{ item }}"
custom-class="demo-checkbox"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block title="设置最大可选数">
<van-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
<van-checkbox
wx:for="{{ list }}"
wx:key="{{ index }}"
name="{{ item }}"
custom-class="demo-checkbox"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block title="与 Cell 组件一起使用">
<van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
<van-cell-group >
<van-cell
wx:for="{{ list }}"
wx:key="{{ index }}"
title="复选框{{ item }}"
clickable
data-name="{{ item }}"
bind:click="toggle"
>
<van-checkbox class="checkboxes-{{ item }}" name="{{ item }}" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>