<switch> (deprecated)

v0.6.1+

deprecated: This built-in component will be deprecated soon. There’re some reasons for this deprecation, such as the inconsistency of user experience on different ends, and the component’s appearance sometimes being not as expected. Therefore we strongly suggest developers build this component as a customized component using weex’s DSL and its rendering ability.

<switch> is a checkbox-like UI component.

Note: The appearance of switch component is a bit of different in three ends (iOS, Android, Web) in consideration of different platform styles.

Android Web iOS
Android Web iOS

Note: Layout style attributes listed below such as width, height, margin are not supported.

Basic Usage#

<switch></switch>

See the example.

Attributes#

Attribute Type Value Default Value
checked Boolean true / false false
disabled Boolean true / false false

checked#

Indicates this component’s status is set to true or false.

disabled#

Indicates this component is not available for interaction.

Component Methods#

None.

Events#

Parameters of events’ object for onchange event:#

  • value: the value of the component who dispatched this event, which is the boolean value true or false.
  • timestamp: the time stamp of the event.

Styles#

Notes: There are several style properties that you mustn’t use on this component. And here are all the invalid properties:

  • width
  • height
  • min-width
  • min-height
  • margin and margin-xxx
  • padding and padding-xxx
  • border and border-xxx

Notes: If the container of <switch> is not set to align-items:flex-start, the switch in android will be stretched.

common styles: check out common styles for components

Usage Notes#

  • The width and height in the styles of <switch> won’t effect the component’s apparence and layout.
  • <switch> can not have any nested child component.

Examples#

Edit this page on GitHub