UNPKG

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