Switch 开关

使用指南

在 page.json 中引入组件

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

图片演示

Switch 开关 - 图1

代码演示

  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-
valuebooleanfalse
color颜色,激活后的颜色string-
disabled是否禁用booleanfalse

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

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