index.wxml 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Swicth</view>
  4. <view class="page__desc">滑动开关</view>
  5. </view>
  6. <view class="page__bd">
  7. <form bindsubmit="formSubmit">
  8. <wux-cell-group title="Form switch">
  9. <wux-cell title="Light">
  10. <wux-switch name="light" slot="footer" color="light" value="{{ value1 }}" bind:change="onChange1" />
  11. </wux-cell>
  12. <wux-cell title="Stable">
  13. <wux-switch name="stable" slot="footer" color="stable" value="{{ value1 }}" bind:change="onChange1" />
  14. </wux-cell>
  15. <wux-cell title="Positive">
  16. <wux-switch name="positive" slot="footer" color="positive" value="{{ value1 }}" bind:change="onChange1" />
  17. </wux-cell>
  18. <wux-cell title="Calm">
  19. <wux-switch name="calm" slot="footer" color="calm" value="{{ value1 }}" bind:change="onChange1" />
  20. </wux-cell>
  21. <wux-cell title="Balanced">
  22. <wux-switch name="balanced" slot="footer" color="balanced" value="{{ value1 }}" bind:change="onChange1" />
  23. </wux-cell>
  24. <wux-cell title="Energized">
  25. <wux-switch name="energized" slot="footer" color="energized" value="{{ value1 }}" bind:change="onChange1" />
  26. </wux-cell>
  27. <wux-cell title="Assertive">
  28. <wux-switch name="assertive" slot="footer" color="assertive" value="{{ value1 }}" bind:change="onChange1" />
  29. </wux-cell>
  30. <wux-cell title="Royal">
  31. <wux-switch name="royal" slot="footer" color="royal" value="{{ value1 }}" bind:change="onChange1" />
  32. </wux-cell>
  33. <wux-cell title="Dark">
  34. <wux-switch name="dark" slot="footer" color="dark" value="{{ value1 }}" bind:change="onChange1" />
  35. </wux-cell>
  36. <wux-cell title="On">
  37. <wux-switch name="a" slot="footer" value="{{ value2 }}" bind:change="onChange2" />
  38. </wux-cell>
  39. <wux-cell title="Off">
  40. <wux-switch name="b" slot="footer" value="{{ value3 }}" bind:change="onChange3" />
  41. </wux-cell>
  42. <wux-cell title="Custom color">
  43. <wux-switch name="c" slot="footer" value="{{ value4 }}" color="red" bind:change="onChange4" />
  44. </wux-cell>
  45. <wux-cell title="Custom color">
  46. <wux-switch name="d" slot="footer" value="{{ value5 }}" color="yellow" bind:change="onChange5" />
  47. </wux-cell>
  48. <wux-cell title="Disabled on">
  49. <wux-switch name="e" slot="footer" value="{{ true }}" disabled />
  50. </wux-cell>
  51. <wux-cell title="Disabled off">
  52. <wux-switch name="f" slot="footer" value="{{ false }}" disabled />
  53. </wux-cell>
  54. <wux-cell title="Custom Text">
  55. <wux-switch name="g" slot="footer" value="{{ value5 }}" checkedText="开" uncheckedText="关" bind:change="onChange5" />
  56. </wux-cell>
  57. <wux-cell title="Custom Text">
  58. <wux-switch name="h" slot="footer" value="{{ value5 }}" bind:change="onChange5">
  59. <text slot="checked">√</text>
  60. <text slot="unchecked">×</text>
  61. </wux-switch>
  62. </wux-cell>
  63. <wux-cell title="Loading">
  64. <wux-switch name="i" slot="footer" value="{{ value6 }}" loading bind:change="onChange6" />
  65. </wux-cell>
  66. <wux-cell title="Async">
  67. <wux-switch name="j" slot="footer" color="positive" value="{{ value7 }}" loading="{{ loading }}" bind:change="onChange7" />
  68. </wux-cell>
  69. </wux-cell-group>
  70. <view class="btn-area">
  71. <button formType="submit">Submit</button>
  72. </view>
  73. </form>
  74. </view>
  75. </view>