1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction, FormItemProps } from './common'
|
3 |
|
4 | interface 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 | */
|
163 | declare const Checkbox: ComponentType<CheckboxProps>
|
164 |
|
165 |
|
166 | export { Checkbox, CheckboxProps }
|