Switch

Switch picker.

Reference

Type

ComponentType<SwitchProps>

Examples

React

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>
    )
  }
}

Vue

<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	✔️	✔️	✔️	✔️	✔️	✔️