UNPKG

tdesign-miniprogram

Version:

tdesign-miniprogram

tdesign.tencent.com/miniprogram

Tencent/tdesign-miniprogram

88 lines (74 loc) • 4.24 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
:: BASE_DOC :: ## API ### Checkbox Props name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N block | Boolean | true | \- | N borderless | Boolean | false | \- | N check-all | Boolean | false | \- | N checked | Boolean | false | \- | N default-checked | Boolean | undefined | uncontrolled property | N content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N content-disabled | Boolean | - | \- | N disabled | Boolean | undefined | \- | N icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N indeterminate | Boolean | false | \- | N label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max-content-row | Number | 5 | \- | N max-label-row | Number | 3 | \- | N name | String | - | \- | N placement | String | left | options: left/right | N readonly | Boolean | false | \- | N value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N ### Checkbox Events name | params | description -- | -- | -- change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | \- ### Checkbox External Classes className | Description -- | -- t-class | \- t-class-border | \- t-class-content | \- t-class-icon | \- t-class-label | \- ### CheckboxGroup Props name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N borderless | Boolean | false | \- | N disabled | Boolean | undefined | \- | N keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max | Number | undefined | \- | N name | String | - | \- | N options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N default-value | Array | undefined | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N ### CheckboxGroup Events name | params | description -- | -- | -- change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | \- ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-checkbox-bg-color | @bg-color-container | - --td-checkbox-border-color | @component-stroke | - --td-checkbox-description-color | @text-color-secondary | - --td-checkbox-description-disabled-color | @text-color-disabled | - --td-checkbox-description-line-height | 44rpx | - --td-checkbox-font-size | 32rpx | - --td-checkbox-icon-checked-color | @brand-color | - --td-checkbox-icon-color | @component-border | - --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - --td-checkbox-icon-disabled-color | @brand-color-disabled | - --td-checkbox-icon-size | 48rpx | - --td-checkbox-tag-active-bg-color | @brand-color-light | - --td-checkbox-tag-active-color | @brand-color | - --td-checkbox-title-color | @text-color-primary | - --td-checkbox-title-disabled-color | @text-color-disabled | - --td-checkbox-title-line-height | 48rpx | - --td-checkbox-vertical-padding | 32rpx | -