Switch
Switch picker.
Type
ComponentType<SwitchProps>
Examples
- React
- Vue
export default class PageView extends Component {
constructor() {
super(...arguments)
}
render() {
return (
<View className='components-page'>
<Text>default style</Text>
<Switch checked/>
<Switch/>
<Text>recommend style</Text>
<Switch checked/>
<Switch/>
</View>
)
}
}
<template>
<view class='components-page'>
<text>default style</text>
<switch :checked="true" />
<switch />
<text>recommend style</text>
<switch :checked="true" />
<switch />
</view>
</template>
SwitchProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
checked | boolean | false | No | Specifies whether the item is selected |
disabled | boolean | false | No | Specifies whether to disable the component. |
type | "switch" | "checkbox" | "switch" | No | The style. Valid values include `switch` and `checkbox`. |
color | string | "#04BE02" | No | The color of the switch component. It is the same as the color of the css component. |
onChange | BaseEventOrigFunction<onChangeEventDetail> | No | A change event triggered when checked changes. |
Property Support
Property | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
SwitchProps.checked | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwitchProps.disabled | ✔️ | ✔️ | ||||
SwitchProps.type | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwitchProps.color | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwitchProps.onChange | ✔️ | ✔️ |
onChangeEventDetail
Param | Type |
---|---|
value | boolean |
API Support
API | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
Switch | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |