switch

v0.6.1+

<switch> 是个类似 checkbox 的 UI

注意: switch 组件的外观在三个平台（iOS, Android, Web）稍有不同，这和各平台的 UI 风格有关。

Android Web iOS
Android Web iOS

注意: switch 不支持一些涉及布局的样式， 如 width, height, margin 等，下面有详细的样式不支持列表.

基本用法

  1. <switch></switch>

参考示例.

特性

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

checked

表示组件的选中状态。

disabled

表示组件是否处于不可交互状态。

组件方法

无。

事件

  • change：改变开关状态时触发该事件。

    事件中 event 对象属性：

    • value: 组件布尔值真或假。
    • timestamp: 事件的时间戳。

  • 通用事件

    支持所有通用事件：

    • click
    • longpress
    • appear
    • disappear

    查看 通用事件

样式

注意: 某些样式在 switch 组件上不能使用或使用无效，它们是：

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

注意: 如果 <switch> 的容器没有设置为 align-items：flex-start，则 Android 中的开关将被拉伸。

  • 通用样式

    • flexbox 布局
    • position
    • opacity
    • background-color

查看 组件通用样式

使用说明

  • 不要设置样式 width and height，因为它们用在 <switch> 上不会影响该组件的外观和布局.
  • <switch> 不支持内嵌子组件.

示例