# Cube-Checkbox
# 介绍
复选框，可设置其状态、传入特殊 class 以及复选框图标位置。
# 示例
# 基础用法
设置双向绑定的值为 true，此时复选框处于默认选中状态。
<template>
<view class="checkbox-demo">
<view-desc>默认勾选：{{ checkboxValue }}</view-desc>
<view class="cube-checkbox-example">
<cube-checkbox wx:model="{{ checkboxValue }}" wx:model-prop="value">Default Checked</cube-checkbox>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
options: {
styleIsolation: 'shared'
},
data: {
checkboxValue: true
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 禁用选项
在 option 里配置 disabled 属性值为 true，当前选项将处于禁用状态。
<template>
<view class="checkbox-disabled-demo">
<view-desc>禁用选项</view-desc>
<view class="cube-checkbox-example">
<cube-checkbox option="{{ option }}" shape="square">Disabled</cube-checkbox>
</view>
<view-desc>禁用选项</view-desc>
<view class="cube-checkbox-example">
<cube-checkbox option="{{ option }}">Disabled</cube-checkbox>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
options: {
styleIsolation: 'shared'
},
data: {
option: {
disabled: true
}
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 支持描述文案
option 配置项除了可以设置 text，还可以设置 desc 作为描述文案显示在第二行。
<template>
<view class="checkbox-desc-support-demo">
<view-desc>支持描述文案：{{ checkboxValue }}</view-desc>
<view class="cube-checkbox-example">
<cube-checkbox option="{{ option }}" shape="square" wx:model="{{ checkboxValue }}" wx:model-prop="value">
</cube-checkbox>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
options: {
styleIsolation: 'shared'
},
data: {
option: {
value: '橘子🍊',
text: '选择一',
desc: '橘子🍊',
position: 'right'
},
checkboxValue: false
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 设置图标位置
在 option 里配置 position 属性值为 right，图标将会显示在右侧。
<template>
<view class="checkbox-styled-demo">
<view-desc>圆形选项：{{ checkboxValue }}</view-desc>
<view class="cube-checkbox-example">
<cube-checkbox wx:model="{{ checkboxValue }}" wx:model-prop="value">Checkbox</cube-checkbox>
</view>
<view-desc>方形选择框：{{ checkboxValue }}</view-desc>
<view class="cube-checkbox-example">
<cube-checkbox
option="{{ option }}"
shape="square"
wx:model="{{ checkboxValue }}"
wx:model-prop="value"
>Styled Checkbox</cube-checkbox>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
options: {
styleIsolation: 'shared'
},
data: {
option: {
position: 'right'
},
checkboxValue: false
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| themeType | 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo | String | - | - |
| option | 配置项 | Object | Option | Option |
| value | 双向绑定是否选中 | Boolean | true/false | false |
| shape | 复选框形状 | String | round/square | round |
# TsType
| Name | Type |
|---|---|
| Option | |
# Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| input | 当绑定值变化时触发 | 事件对象 e，包含选中态 value，以及 option 里定义的 value |
# Slots
| 插槽名 | 说明 |
|---|---|
| — (默认插槽) | 自定义文本插槽内容 |
# CSS Variable
| 变量名 | 默认值 | 含义 |
|---|---|---|
| $checkbox-checked-color | 复选框主色 | |
| $checkbox-ui-round-width | 18px | 圆形复选框宽度 |
| $checkbox-ui-round-height | 圆形复选框高度 | |
| $checkbox-ui-square-width | 18px | 方形复选框宽度 |
| $checkbox-ui-square-height | 方形复选框高度 | |
| $checkbox-ui-width | 复选框宽度 | |
| $checkbox-ui-height | 复选框高度 | |
| $checkbox-inner-ui-width | 7px | 复选框内部选中宽度 |
| $checkbox-inner-ui-height | 4px | 复选框内部选中高度 |
| $checkbox-ui-round-border | 1px solid #C8C9CC | 圆形复选框边框 |
| $checkbox-ui-square-border | 1px solid #C8C9CC | 方形复选框边框 |
| $checkbox-ui-round-border_disabled | 2px solid $var(color-disabled) | 圆形复选框禁用边框 |
| $checkbox-ui-square-border_disabled | 1px solid $var(color-disabled) | 方形复选框禁用边框 |
| $checkbox-ui-round-border_checked | 2px solid $var(color-primary) | 圆形复选框选中边框 |
| $cube-checkbox-ui_checked | 2px solid $var(color-primary) | 复选框选中边框 |
| $checkbox-ui-square-border_checked | none | 方形复选框选中边框 |
| $checkbox-inner-ui-border | 2px solid $var(color-primary) | 复选框内部选中边框 |
| $checkbox-ui-round-bgc | #FAFAFA | 圆形复选框背景色 |
| $checkbox-ui-square-bgc | 方形复选框背景色 | |
| $checkbox-ui-round-bgc_checked | #FFF8F4 | 圆形复选框选中背景色 |
| $checkbox-ui-square-bgc_checked | 方形复选框选中背景色 | |
| $checkbox-ui-round-bgimg | url('data:image/svg+xml;base64... | 圆形复选框选中图形(对勾) |
| $checkbox-ui-square-bgimg | url('data:image/svg+xml;base64... | 方形复选框选中图形(对勾) |
| $checkbox-ui-bg_disabled | 复选框禁用背景色 | |
| $checkbox-ui-bg-opacity | .3 | 复选框禁用透明度 |
| $checkbox-ui-square-radius | 4px | 方形复选框圆角 |
| $checkbox-ui-round-radius | 50% | 圆形复选框圆角 |
| $checkbox-ui-margin | 0 0 0 10px | 复选框外边距 |
| $checkbox-ui-margin-right | 10px | 复选框右边距 |
| $checkbox-ui-round-margin-right | 10px | 圆形复选框右边距 |
| $checkbox-ui-square-margin-right | 10px | 方形复选框右边距 |
| $checkbox-label-padding | 10px 0 | 标签内边距 |
| $checkbox-text-desc-color_disabled | unset | 禁用文本颜色 |
| $checkbox-text-font-size | 18px | 文本字号 |
| $checkbox-text-font-weight | 700 | 文本字重 |
| $checkbox-desc-font-size | 12px | 描述文本字号 |
| $checkbox-text-color | 复文颜色 | |
| $checkbox-desc-color | #757575 | 描述文本颜色 |
| $checkbox-text-line-height | 1 | 文本行高 |
| $checkbox-desc-line-height | 1.2 | 描述文本行高 |
| $checkbox-inner-ui-transition | transform .2s | 内部选中过渡 |