switch

v0.6.1+

<switch> 是个类似 checkbox 的 UI

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

Android	Web	iOS

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

基本用法

<switch></switch>

参考示例.

特性

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> 不支持内嵌子组件.

示例

• 简单示例
• 各种状态的 switch