# 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="开关" />
  2. <w-cell-group>
  3. <w-cell label="Default">
  4. <w-switch
  5. slot="content"
  6. value="{{ value }}"
  7. bind:onChange="handleChange"
  8. />
  9. </w-cell>
  10. <w-cell label="Size = small">
  11. <w-switch
  12. slot="content"
  13. value="{{ value }}"
  14. size="small"
  15. bind:onChange="handleChange"
  16. />
  17. </w-cell>
  18. <w-cell label="Size = default">
  19. <w-switch
  20. slot="content"
  21. value="{{ value }}"
  22. size="default"
  23. bind:onChange="handleChange"
  24. />
  25. </w-cell>
  26. <w-cell label="Size = larger">
  27. <w-switch
  28. slot="content"
  29. value="{{ value }}"
  30. size="larger"
  31. bind:onChange="handleChange"
  32. />
  33. </w-cell>
  34. <w-cell label="Color = 1c75f3" labelSpan="5">
  35. <w-switch
  36. slot="content"
  37. value="{{ value }}"
  38. color="#1c75f3"
  39. bind:onChange="handleChange"
  40. />
  41. </w-cell>
  42. <w-cell label="Color = 28a2f3" labelSpan="5">
  43. <w-switch
  44. slot="content"
  45. value="{{ value }}"
  46. color="#28a2f3"
  47. bind:onChange="handleChange"
  48. />
  49. </w-cell>
  50. <w-cell label="Color = ff8800" labelSpan="5">
  51. <w-switch
  52. slot="content"
  53. value="{{ value }}"
  54. color="#ff8800"
  55. bind:onChange="handleChange"
  56. />
  57. </w-cell>
  58. <w-cell label="Color = e42112" labelSpan="5">
  59. <w-switch
  60. slot="content"
  61. value="{{ value }}"
  62. color="#e42112"
  63. bind:onChange="handleChange"
  64. />
  65. </w-cell>
  66. <w-cell label="Disabled">
  67. <w-switch
  68. slot="content"
  69. disabled
  70. value
  71. color="#1c75f3"
  72. />
  73. </w-cell>
  74. </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 单选框