UNPKG

2.76 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction, FormItemProps } from './common'
3interface SwitchProps extends StandardProps, FormItemProps {
4 /** 是否选中
5 * @default false
6 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
7 */
8 checked?: boolean
9 /** 设置在 React 非受控状态下,当前是否选中
10 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
11 * @unique
12 */
13 defaultChecked?: boolean
14 /** 是否禁用
15 * @default false
16 * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid
17 */
18 disabled?: boolean
19 /** 样式,有效值:switch, checkbox
20 * @default "switch"
21 * @supported weapp, swan, tt, qq, jd, h5, rn, harmony_hybrid
22 */
23 type?: 'switch' | 'checkbox'
24 /** switch 的颜色,同 css 的 color
25 * @default "#04BE02"
26 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
27 */
28 color?: string
29 /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
30 * @supported h5, harmony_hybrid
31 */
32 nativeProps?: Record<string, unknown>
33 /** 组件名字,用于表单提交获取数据。
34 * @supported alipay
35 */
36 name?: string
37 /** 是否为受控组件,为 true 时,checked 会完全受 setData 控制。
38 * @default false
39 * @supported alipay
40 */
41 controlled?: string
42 /** 无障碍访问,(属性)元素的额外描述
43 * @supported qq
44 */
45 ariaLabel?: string
46 /** checked 改变时触发 change 事件
47 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
48 */
49 onChange?: CommonEventFunction<SwitchProps.onChangeEventDetail>
50}
51declare namespace SwitchProps {
52 interface onChangeEventDetail {
53 value: boolean
54 }
55}
56/** 开关选择器
57 * @classification forms
58 * @example_react
59 * ```tsx
60 * export default class PageView extends Component {
61 * constructor() {
62 * super(...arguments)
63 * }
64 *
65 * render() {
66 * return (
67 * <View className='components-page'>
68 * <Text>默认样式</Text>
69 * <Switch checked/>
70 * <Switch/>
71 * <Text>推荐展示样式</Text>
72 * <Switch checked/>
73 * <Switch/>
74 * </View>
75 * )
76 * }
77 * }
78 * ```
79 * @example_vue
80 * ```html
81 * <template>
82 * <view class='components-page'>
83 * <text>默认样式</text>
84 * <switch :checked="true" />
85 * <switch />
86 * <text>推荐展示样式</text>
87 * <switch :checked="true" />
88 * <switch />
89 * </view>
90 * </template>
91 * ```
92 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
93 * @see https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
94 */
95declare const Switch: ComponentType<SwitchProps>
96export { Switch, SwitchProps }