Switch 开关

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-switch": "wuss-weapp/w-switch/index",
  3. }

图片演示

Switch 开关 - 图1

代码演示

  1. <w-pane label="Switch" desc="开关" />
  3. <w-cell-group>
  4.     <w-cell label="Default">
  5.         <w-switch
  6.          slot="content"
  7.          value="{{ value }}"
  8.          bind:onChange="handleChange"
  9.         />
  10.     </w-cell>
  12.     <w-cell label="Size = small">
  13.         <w-switch
  14.          slot="content"
  15.          value="{{ value }}"
  16.          size="small"
  17.          bind:onChange="handleChange"
  18.         />
  19.     </w-cell>
  21.     <w-cell label="Size = default">
  22.         <w-switch
  23.          slot="content"
  24.          value="{{ value }}"
  25.          size="default"
  26.          bind:onChange="handleChange"
  27.         />
  28.     </w-cell>
  30.     <w-cell label="Size = larger">
  31.         <w-switch
  32.          slot="content"
  33.          value="{{ value }}"
  34.          size="larger"
  35.          bind:onChange="handleChange"
  36.         />
  37.     </w-cell>
  39.     <w-cell label="Color = 1c75f3" labelSpan="5">
  40.         <w-switch
  41.          slot="content"
  42.          value="{{ value }}"
  43.          color="#1c75f3"
  44.          bind:onChange="handleChange"
  45.         />
  46.     </w-cell>
  48.     <w-cell label="Color = 28a2f3" labelSpan="5">
  49.         <w-switch
  50.          slot="content"
  51.          value="{{ value }}"
  52.          color="#28a2f3"
  53.          bind:onChange="handleChange"
  54.         />
  55.     </w-cell>
  57.     <w-cell label="Color = ff8800" labelSpan="5">
  58.         <w-switch
  59.          slot="content"
  60.          value="{{ value }}"
  61.          color="#ff8800"
  62.          bind:onChange="handleChange"
  63.         />
  64.     </w-cell>
  66.     <w-cell label="Color = e42112" labelSpan="5">
  67.         <w-switch
  68.          slot="content"
  69.          value="{{ value }}"
  70.          color="#e42112"
  71.          bind:onChange="handleChange"
  72.         />
  73.     </w-cell>
  75.     <w-cell label="Disabled">
  76.         <w-switch
  77.          slot="content"
  78.          disabled
  79.          value
  80.          color="#1c75f3"
  81.         />
  82.     </w-cell>
  84. </w-cell-group>

API

Attribute 属性

属性说明类型默认值
size大小,可选[small/default/larger]string-
valuebooleanfalse
color颜色，激活后的颜色string-
disabled是否禁用booleanfalse

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class根节点样式类