<switch>

v0.6.1+

<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