|
|
# checkbox-group
多选框组
HarmonyOS
| HarmonyOS |
|---|
| HBuilderX 4.23 |
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| @change | EventHandle |
<checkbox-group>
中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
|
# checkbox
多选项。在1组check-group中可选择多个
HarmonyOS
| HarmonyOS |
|---|
| HBuilderX 4.23 |
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| value | String |
<checkbox>
标识，选中时触发
<checkbox-group>
的 change 事件，并携带
<checkbox>
的 value。
|
||
| disabled | Boolean | false | 是否禁用 | |
| checked | Boolean | false | 当前是否选中，可用来设置默认选中 | |
| color | Color | checkbox的颜色，同css的color | ||
| backgroundColor | Color | #ffffff | checkbox默认的背景颜色 | H5(3.99+)、App-Vue(3.99+) |
| borderColor | Color | #d1d1d1 | checkbox默认的边框颜色 | H5(3.99+)、App-Vue(3.99+) |
| activeBackgroundColor | Color | #ffffff | checkbox选中时的背景颜色，优先级大于color属性 | H5(3.99+)、App-Vue(3.99+) |
| activeBorderColor | Color | #d1d1d1 | checkbox选中时的边框颜色 | H5(3.99+)、App-Vue(3.99+) |
| iconColor | Color | #007aff | checkbox的图标颜色 | H5(3.99+)、App-Vue(3.99+) |
示例 查看演示
以下示例代码，来自于 hello uni-app项目 ，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
Template
Script
Style
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">默认样式</view>
<checkbox-group>
<label>
<checkbox value="cb" :checked="true" />选中
</label>
<label>
<checkbox value="cb" />未选中
</label>
</checkbox-group>
</view>
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
<checkbox-group>
<label>
<checkbox value="cb" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
</label>
<label>
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
</label>
</checkbox-group>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
推荐展示样式
<text>\n使用 uni-list 布局</text>
</view>
</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<checkbox :value="item.value" :checked="item.checked" />
</view>
<view>{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
</template>