<custom chineseName="多项选择器" engName="checkbox"></custom>
<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默认样式</view>
        <view class="block border-bottom">
            <checkbox checked>多选项一</checkbox>
            <checkbox class="block-before">多选项二</checkbox>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">列表展示</view>
        <checkbox-group bindchange="checkboxChange">
            <label class="block border-bottom" s-for="item in items">
                <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</checkbox>
            </label>
        </checkbox-group>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>包含禁用选项</view>
            <view>disabled</view>
        </view>
        <label class="block border-bottom">
            <checkbox value="checkbox1" checked>可用选项</checkbox>
        </label>
        <label class="block border-bottom">              
            <checkbox value="checkbox2">可用选项 </checkbox>
        </label>
        <label class="block border-bottom">
            <checkbox value="checkbox3" disabled color="#C3D1FF" checked></checkbox>
            <text class="disabledText">禁用选项</text>
        </label>
        <label class="block border-bottom">
            <checkbox value="checkbox4" disabled color="#ccc"></checkbox>
            <text class="disabledText">禁用选项</text>
        </label>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>默认不选中</view>
            <view>checked="false"</view>
        </view>
        <checkbox-group bindchange="checkboxChange" >
            <label class="block border-bottom">
                <checkbox value="checkbox1">多选项一</checkbox>
            </label>
            <label class="block border-bottom">
                <checkbox value="checkbox2">多选项二</checkbox>
            </label>
        </checkbox-group>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义颜色</view>
            <view>color="#00BC89"</view>
        </view>
        <checkbox-group bindchange="checkboxChange" >
            <label class="block border-bottom">
                <checkbox value="checkbox1" color="#00BC89" checked>选项名称</checkbox>
            </label>
            <label class="block border-bottom">
                <checkbox value="checkbox2" color="#00BC89">选项名称</checkbox>
            </label>
        </checkbox-group>
    </view>
</view>
