1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction, FormItemProps } from './common'
|
3 | interface CheckboxProps extends StandardProps {
|
4 | /** `<Checkbox/>`标识,选中时触发`<CheckboxGroup/>`的 change 事件,并携带 `<Checkbox/>` 的 value
|
5 | * @supported weapp, alipay, swan, tt, qq, jd, rn
|
6 | */
|
7 | value: string
|
8 |
|
9 | /** 是否禁用
|
10 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
11 | * @default false
|
12 | */
|
13 | disabled?: boolean
|
14 |
|
15 | /** 当前是否选中,可用来设置默认选中
|
16 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
17 | * @default false
|
18 | */
|
19 | checked?: boolean
|
20 |
|
21 | /** checkbox的颜色,同 css 的 color
|
22 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
23 | */
|
24 | color?: string
|
25 |
|
26 | /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
|
27 | * @supported h5
|
28 | */
|
29 | nativeProps?: Record<string, unknown>
|
30 |
|
31 | /** 无障碍访问,(属性)元素的额外描述
|
32 | * @supported qq
|
33 | */
|
34 | ariaLabel?: string
|
35 |
|
36 | /** 选中项发生变化时触发 change 事件,小程序无此 API
|
37 | * @supported alipay, h5, rn
|
38 | */
|
39 | onChange?: CommonEventFunction<{
|
40 | value: string[]
|
41 | }>
|
42 | }
|
43 |
|
44 | /** 多选项目
|
45 | * @classification forms
|
46 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
|
47 | * @example_react
|
48 | * ```tsx
|
49 | * export default class PageCheckbox extends Component {
|
50 | * state = {
|
51 | * list: [
|
52 | * {
|
53 | * value: '美国',
|
54 | * text: '美国',
|
55 | * checked: false
|
56 | * },
|
57 | * {
|
58 | * value: '中国',
|
59 | * text: '中国',
|
60 | * checked: true
|
61 | * },
|
62 | * {
|
63 | * value: '巴西',
|
64 | * text: '巴西',
|
65 | * checked: false
|
66 | * },
|
67 | * {
|
68 | * value: '日本',
|
69 | * text: '日本',
|
70 | * checked: false
|
71 | * },
|
72 | * {
|
73 | * value: '英国',
|
74 | * text: '英国',
|
75 | * checked: false
|
76 | * },
|
77 | * {
|
78 | * value: '法国',
|
79 | * text: '法国',
|
80 | * checked: false
|
81 | * }
|
82 | * ]
|
83 | * }
|
84 | * render () {
|
85 | * return (
|
86 | * <View className='page-body'>
|
87 | * <View className='page-section'>
|
88 | * <Text>默认样式</Text>
|
89 | * <Checkbox value='选中' checked>选中</Checkbox>
|
90 | * <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
|
91 | * </View>
|
92 | * <View className='page-section'>
|
93 | * <Text>推荐展示样式</Text>
|
94 | * {this.state.list.map((item, i) => {
|
95 | * return (
|
96 | * <Label className='checkbox-list__label' for={i} key={i}>
|
97 | * <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
|
98 | * </Label>
|
99 | * )
|
100 | * })}
|
101 | * </View>
|
102 | * </View>
|
103 | * )
|
104 | * }
|
105 | * }
|
106 | * ```
|
107 | * @example_vue
|
108 | * ```html
|
109 | * <template>
|
110 | * <view class="container">
|
111 | * <view class="page-section">
|
112 | * <text>默认样式</text>
|
113 | * <checkbox value="选中" :checked="true">选中</checkbox>
|
114 | * <checkbox style="margin-left: 20rpx;" value="未选中">未选中</checkbox>
|
115 | * </view>
|
116 | * <view class="page-section">
|
117 | * <text>推荐展示样式(Taro 团队成员):</text>
|
118 | * <label v-for="item in list" class="checkbox-list__label">
|
119 | * <checkbox class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</checkbox>
|
120 | * </label>
|
121 | * </view>
|
122 | * </view>
|
123 | * </template>
|
124 | *
|
125 | * <script>
|
126 | * export default {
|
127 | * data() {
|
128 | * return {
|
129 | * list: [
|
130 | * {
|
131 | * value: '美国',
|
132 | * text: '美国',
|
133 | * checked: false
|
134 | * },
|
135 | * {
|
136 | * value: '中国',
|
137 | * text: '中国',
|
138 | * checked: true
|
139 | * },
|
140 | * {
|
141 | * value: '巴西',
|
142 | * text: '巴西',
|
143 | * checked: false
|
144 | * },
|
145 | * {
|
146 | * value: '日本',
|
147 | * text: '日本',
|
148 | * checked: false
|
149 | * },
|
150 | * {
|
151 | * value: '英国',
|
152 | * text: '英国',
|
153 | * checked: false
|
154 | * },
|
155 | * {
|
156 | * value: '法国',
|
157 | * text: '法国',
|
158 | * checked: false
|
159 | * }
|
160 | * ]
|
161 | * }
|
162 | * }
|
163 | * }
|
164 | * </script>
|
165 | * ```
|
166 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
|
167 | */
|
168 | declare const Checkbox: ComponentType<CheckboxProps>
|
169 | export { Checkbox, CheckboxProps }
|