Switch - 《Taro 文档帮助手册教程》

sidebar_label: Switch
Type
Examples
SwitchProps
- Property Support
- onChangeEventDetail
API Support

title: Switch

sidebar_label: Switch

Switch picker.

Reference

Type

ComponentType<SwitchProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

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

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