index.axml 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <view class='page-container-classname' ref='saveChildRef0'>
  2. <demo-block title='基本用法' padding=" " ref='saveChildRef1'>
  3. <van-radio-group value='{{ radio1 }}' data-key='radio1' onChange='onChange' ref='saveChildRef2'>
  4. <van-radio name='1' custom-class='demo-radio' ref='saveChildRef3'>
  5. 单选框 1
  6. </van-radio>
  7. <van-radio name='2' ref='saveChildRef4'>
  8. 单选框 2
  9. </van-radio>
  10. </van-radio-group>
  11. </demo-block>
  12. <demo-block title='禁用状态' padding=" " ref='saveChildRef5'>
  13. <van-radio-group disabled=" " value='{{ radio2 }}' data-key='radio2' onChange='onChange' ref='saveChildRef6'>
  14. <van-radio name='1' custom-class='demo-radio' ref='saveChildRef7'>
  15. 单选框 1
  16. </van-radio>
  17. <van-radio name='2' ref='saveChildRef8'>
  18. 单选框 2
  19. </van-radio>
  20. </van-radio-group>
  21. </demo-block>
  22. <demo-block title='自定义形状' padding=" " ref='saveChildRef9'>
  23. <van-radio-group value='{{ radioShape }}' data-key='radioShape' onChange='onChange' ref='saveChildRef10'>
  24. <van-radio name='1' shape='square' custom-class='demo-radio' ref='saveChildRef11'>
  25. 单选框
  26. </van-radio>
  27. <van-radio name='2' shape='square' ref='saveChildRef12'>
  28. 单选框
  29. </van-radio>
  30. </van-radio-group>
  31. </demo-block>
  32. <demo-block title='自定义颜色' padding=" " ref='saveChildRef13'>
  33. <van-radio-group value='{{ radio3 }}' data-key='radio3' onChange='onChange' ref='saveChildRef14'>
  34. <van-radio name='1' custom-class='demo-radio' checked-color='#07c160' ref='saveChildRef15'>
  35. 单选框
  36. </van-radio>
  37. <van-radio name='2' checked-color='#07c160' ref='saveChildRef16'>
  38. 单选框
  39. </van-radio>
  40. </van-radio-group>
  41. </demo-block>
  42. <demo-block title='自定义大小' padding=" " ref='saveChildRef17'>
  43. <van-radio-group value='{{ radioSize }}' data-key='radioSize' onChange='onChange' ref='saveChildRef18'>
  44. <van-radio name='1' icon-size='24px' custom-class='demo-radio' ref='saveChildRef19'>
  45. 单选框
  46. </van-radio>
  47. <van-radio name='2' icon-size='24px' ref='saveChildRef20'>
  48. 单选框
  49. </van-radio>
  50. </van-radio-group>
  51. </demo-block>
  52. <demo-block title='自定义图标' padding=" " ref='saveChildRef21'>
  53. <van-radio-group value='{{ radio4 }}' data-key='radio4' onChange='onChange' ref='saveChildRef22'>
  54. <van-radio use-icon-slot=" " name='1' ref='saveChildRef23'>
  55. 自定义图标 <image slot='icon' src="{{ radio4 === '1' ? icon.active : icon.normal }}" class='icon' mode='widthFix'>
  56. </image>
  57. </van-radio>
  58. <van-radio use-icon-slot=" " name='2' ref='saveChildRef24'>
  59. 自定义图标 <image slot='icon' src="{{ radio4 === '2' ? icon.active : icon.normal }}" class='icon' mode='widthFix'>
  60. </image>
  61. </van-radio>
  62. </van-radio-group>
  63. </demo-block>
  64. <demo-block title='禁用文本点击' padding=" " ref='saveChildRef25'>
  65. <van-radio-group value='{{ radioLabel }}' data-key='radioLabel' onChange='onChange' ref='saveChildRef26'>
  66. <van-radio label-disabled=" " name='1' custom-class='demo-radio' ref='saveChildRef27'>
  67. 单选框 1
  68. </van-radio>
  69. <van-radio label-disabled=" " name='2' ref='saveChildRef28'>
  70. 单选框 2
  71. </van-radio>
  72. </van-radio-group>
  73. </demo-block>
  74. <demo-block title='与 Cell 组件一起使用' ref='saveChildRef29'>
  75. <van-radio-group value='{{ radio5 }}' ref='saveChildRef30'>
  76. <van-cell-group ref='saveChildRef31'>
  77. <van-cell title='单选框 1' clickable=" " data-name='1' onClick='onClick' ref='saveChildRef32'>
  78. <van-radio slot='right-icon' name='1' ref='saveChildRef33'>
  79. </van-radio>
  80. </van-cell>
  81. <van-cell title='单选框 2' clickable=" " data-name='2' onClick='onClick' ref='saveChildRef34'>
  82. <van-radio slot='right-icon' name='2' ref='saveChildRef35'>
  83. </van-radio>
  84. </van-cell>
  85. </van-cell-group>
  86. </van-radio-group>
  87. </demo-block>
  88. </view>