index.axml 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <view class='page-container-classname' ref='saveChildRef0'>
  2. <demo-block title='基本用法' ref='saveChildRef1'>
  3. <van-checkbox value='{{ checkbox1 }}' data-key='checkbox1' custom-class='demo-checkbox' onChange='onChange' ref='saveChildRef2'>
  4. 复选框
  5. </van-checkbox>
  6. </demo-block>
  7. <demo-block title='禁用状态' ref='saveChildRef3'>
  8. <van-checkbox disabled=" " value='{{ false }}' custom-class='demo-checkbox' ref='saveChildRef4'>
  9. 复选框
  10. </van-checkbox>
  11. <van-checkbox disabled=" " value='{{ true }}' custom-class='demo-checkbox' ref='saveChildRef5'>
  12. 复选框
  13. </van-checkbox>
  14. </demo-block>
  15. <demo-block title='自定义形状' ref='saveChildRef6'>
  16. <van-checkbox value='{{ checkboxShape }}' data-key='checkboxShape' shape='square' custom-class='demo-checkbox' onChange='onChange' ref='saveChildRef7'>
  17. 复选框
  18. </van-checkbox>
  19. </demo-block>
  20. <demo-block title='自定义颜色' ref='saveChildRef8'>
  21. <van-checkbox value='{{ checkbox2 }}' data-key='checkbox2' checked-color='#07c160' custom-class='demo-checkbox' onChange='onChange' ref='saveChildRef9'>
  22. 复选框
  23. </van-checkbox>
  24. </demo-block>
  25. <demo-block title='自定义大小' ref='saveChildRef10'>
  26. <van-checkbox icon-size='25px' value='{{ checkboxSize }}' data-key='checkboxSize' custom-class='demo-checkbox' onChange='onChange' ref='saveChildRef11'>
  27. 复选框
  28. </van-checkbox>
  29. </demo-block>
  30. <demo-block title='自定义图标' ref='saveChildRef12'>
  31. <van-checkbox use-icon-slot=" " value='{{ checkbox3 }}' data-key='checkbox3' custom-class='demo-checkbox' onChange='onChange' ref='saveChildRef13'>
  32. 自定义图标 <image slot='icon' class='icon' mode='widthFix' src='{{ checkbox3 ? activeIcon : inactiveIcon }}'>
  33. </image>
  34. </van-checkbox>
  35. </demo-block>
  36. <demo-block title='禁用文本点击' ref='saveChildRef14'>
  37. <van-checkbox label-disabled=" " value='{{ checkboxLabel }}' data-key='checkboxLabel' custom-class='demo-checkbox' onChange='onChange' ref='saveChildRef15'>
  38. 复选框
  39. </van-checkbox>
  40. </demo-block>
  41. <demo-block title='复选框组' ref='saveChildRef16'>
  42. <van-checkbox-group value='{{ result }}' data-key='result' onChange='onChange' ref='saveChildRef17'>
  43. <van-checkbox a:for='{{ list }}' a:key='{{*this}}' name='{{ item }}' custom-class='demo-checkbox' ref-numbers='{{ list }}' ref='saveChildRef18'>
  44. 复选框 {{ item }}
  45. </van-checkbox>
  46. </van-checkbox-group>
  47. </demo-block>
  48. <demo-block title='限制最大可选数' ref='saveChildRef19'>
  49. <van-checkbox-group value='{{ result2 }}' data-key='result2' max='2' onChange='onChange' ref='saveChildRef20'>
  50. <van-checkbox a:for='{{ list }}' a:key='{{*this}}' name='{{ item }}' custom-class='demo-checkbox' ref-numbers='{{ list }}' ref='saveChildRef21'>
  51. 复选框 {{ item }}
  52. </van-checkbox>
  53. </van-checkbox-group>
  54. </demo-block>
  55. <demo-block title='搭配单元格组件使用' ref='saveChildRef22'>
  56. <van-checkbox-group value='{{ result3 }}' data-key='result3' onChange='onChange' ref='saveChildRef23'>
  57. <van-cell-group ref='saveChildRef24'>
  58. <van-cell a:for='{{ list }}' a:key='{{*this}}' title='复选框 {{ item }}' value-class='value-class' clickable=" " data-index='{{ index }}' onClick='toggle' ref-numbers='{{ list }}' ref='saveChildRef25'>
  59. <van-checkbox class='checkboxes-{{ index }}' name='{{ item }}' catchTap='antmoveAction' data-antmove-tap='noop' ref='saveChildRef26'>
  60. </van-checkbox>
  61. </van-cell>
  62. </van-cell-group>
  63. </van-checkbox-group>
  64. </demo-block>
  65. </view>