# Switch 开关 - 图1 Wuss-weapp

首页

组件库

快速上手

GitHub

首页

组件库

快速上手

GitHub

基础组件

  • 布局

  • 导航

  • 操作反馈

其他

# Switch 开关

# 使用指南

在 page.json 中引入组件

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

# 图片演示

# Switch 开关 - 图2

# 代码演示

  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 -
value boolean false
color 颜色，激活后的颜色 string -
disabled 是否禁用 boolean false

# Event 事件

事件名 说明 参数

# Slot 插槽

名称 说明

# Class 自定义类名

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

Edit this page

← Input 输入框 Radio 单选框 →