index.wxml 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Selectable</view>
  4. <view class="page__desc">选框组</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="sub-title">Checkbox & Radio</view>
  8. <wux-selectable color="light" value="1" defaultChecked />
  9. <wux-selectable color="stable" value="2" defaultChecked />
  10. <wux-selectable color="positive" value="3" defaultChecked />
  11. <wux-selectable color="calm" value="4" />
  12. <wux-selectable color="balanced" value="5" />
  13. <wux-selectable color="energized" value="6" />
  14. <wux-selectable color="assertive" value="7" disabled />
  15. <wux-selectable color="royal" value="8" disabled />
  16. <wux-selectable color="dark" value="9" disabled />
  17. <wux-selectable type="radio" color="light" value="1" defaultChecked />
  18. <wux-selectable type="radio" color="stable" value="2" defaultChecked />
  19. <wux-selectable type="radio" color="positive" value="3" defaultChecked />
  20. <wux-selectable type="radio" color="calm" value="4" defaultChecked />
  21. <wux-selectable type="radio" color="balanced" value="5" defaultChecked />
  22. <wux-selectable type="radio" color="energized" value="6" defaultChecked />
  23. <wux-selectable type="radio" color="assertive" value="7" disabled defaultChecked />
  24. <wux-selectable type="radio" color="royal" value="8" disabled defaultChecked />
  25. <wux-selectable type="radio" color="dark" value="9" disabled defaultChecked />
  26. <view class="sub-title">Controlled</view>
  27. <wux-selectable color="light" value="1" checked="{{ checked }}" bind:change="onCheckboxChange" />
  28. <view class="sub-title">Slot</view>
  29. <wux-selectable color="light" value="1" type="default">
  30. <view class="icon-on" slot="icon-on"></view>
  31. <view class="icon-off" slot="icon-off"></view>
  32. </wux-selectable>
  33. <view class="sub-title">With cellGroup</view>
  34. <wux-cell-group>
  35. <block wx:for="{{ items }}" wx:key="index">
  36. <wux-cell title="{{ item.label }}">
  37. <wux-selectable slot="header" wux-class="checkbox" value="{{ item.value }}" />
  38. </wux-cell>
  39. </block>
  40. </wux-cell-group>
  41. <view class="sub-title">With cellGroup</view>
  42. <wux-cell-group>
  43. <block wx:for="{{ items }}" wx:key="index">
  44. <wux-cell title="{{ item.label }}">
  45. <wux-selectable slot="footer" wux-class="checkbox" type="radio" value="{{ item.value }}" checked="{{ value === item.value }}" controlled bind:change="onChange" />
  46. </wux-cell>
  47. </block>
  48. </wux-cell-group>
  49. <view class="sub-title">Other</view>
  50. <wux-selectable color="light" value="1">Agree agreement</wux-selectable>
  51. </view>
  52. </view>