index.axml 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <view class='page-container-classname' ref='saveChildRef0'>
  2. <demo-block title='按钮类型' padding=" " ref='saveChildRef1'>
  3. <view class='row'>
  4. <van-button class='demo-margin-right' ref='saveChildRef2'>
  5. 默认按钮
  6. </van-button>
  7. <van-button type='primary' class='demo-margin-right' ref='saveChildRef3'>
  8. 主要按钮
  9. </van-button>
  10. <van-button type='info' class='demo-margin-right' ref='saveChildRef4'>
  11. 信息按钮
  12. </van-button>
  13. </view>
  14. <van-button type='danger' class='demo-margin-right' ref='saveChildRef5'>
  15. 危险按钮
  16. </van-button>
  17. <van-button type='warning' ref='saveChildRef6'>
  18. 警告按钮
  19. </van-button>
  20. </demo-block>
  21. <demo-block title='朴素按钮' padding=" " ref='saveChildRef7'>
  22. <van-button type='primary' plain=" " class='demo-margin-right' ref='saveChildRef8'>
  23. 朴素按钮
  24. </van-button>
  25. <van-button type='info' plain=" " ref='saveChildRef9'>
  26. 朴素按钮
  27. </van-button>
  28. </demo-block>
  29. <demo-block title='细边框' padding=" " ref='saveChildRef10'>
  30. <van-button type='primary' plain=" " hairline=" " class='demo-margin-right' ref='saveChildRef11'>
  31. 细边框按钮
  32. </van-button>
  33. <van-button type='info' plain=" " hairline=" " ref='saveChildRef12'>
  34. 细边框按钮
  35. </van-button>
  36. </demo-block>
  37. <demo-block title='禁用状态' padding=" " ref='saveChildRef13'>
  38. <van-button type='primary' disabled=" " class='demo-margin-right' ref='saveChildRef14'>
  39. 禁用状态
  40. </van-button>
  41. <van-button type='info' disabled=" " ref='saveChildRef15'>
  42. 禁用状态
  43. </van-button>
  44. </demo-block>
  45. <demo-block title='加载状态' padding=" " ref='saveChildRef16'>
  46. <van-button loading=" " type='primary' class='demo-margin-right' ref='saveChildRef17'>
  47. </van-button>
  48. <van-button loading=" " type='primary' loading-type='spinner' class='demo-margin-right' ref='saveChildRef18'>
  49. </van-button>
  50. <van-button loading=" " type='info' loading-text='加载中...' ref='saveChildRef19'>
  51. </van-button>
  52. </demo-block>
  53. <demo-block title='按钮形状' padding=" " ref='saveChildRef20'>
  54. <van-button type='primary' square=" " class='demo-margin-right' ref='saveChildRef21'>
  55. 方形按钮
  56. </van-button>
  57. <van-button type='info' round=" " ref='saveChildRef22'>
  58. 圆形按钮
  59. </van-button>
  60. </demo-block>
  61. <demo-block title='图标按钮' padding=" " ref='saveChildRef23'>
  62. <van-button type='primary' icon='star-o' class='demo-margin-right' ref='saveChildRef24'>
  63. </van-button>
  64. <van-button type='primary' icon='star-o' class='demo-margin-right' ref='saveChildRef25'>
  65. 按钮
  66. </van-button>
  67. <van-button plain=" " type='primary' icon='https://img.yzcdn.cn/vant/logo.png' ref='saveChildRef26'>
  68. 按钮
  69. </van-button>
  70. </demo-block>
  71. <demo-block title='按钮尺寸' padding=" " ref='saveChildRef27'>
  72. <van-button type='primary' size='large' block=" " custom-class='demo-margin-bottom' ref='saveChildRef28'>
  73. 大号按钮
  74. </van-button>
  75. <van-button type='primary' class='demo-margin-right' ref='saveChildRef29'>
  76. 普通按钮
  77. </van-button>
  78. <van-button type='primary' size='small' class='demo-margin-right' ref='saveChildRef30'>
  79. 小型按钮
  80. </van-button>
  81. <van-button type='primary' size='mini' ref='saveChildRef31'>
  82. 迷你按钮
  83. </van-button>
  84. </demo-block>
  85. <demo-block title='块级元素' padding=" " ref='saveChildRef32'>
  86. <van-button type='primary' custom-class='demo-margin-bottom' ref='saveChildRef33'>
  87. 普通按钮
  88. </van-button>
  89. <van-button type='primary' block=" " ref='saveChildRef34'>
  90. 块级元素
  91. </van-button>
  92. </demo-block>
  93. <demo-block title='自定义颜色' padding=" " ref='saveChildRef35'>
  94. <van-button color='#7232dd' class='demo-margin-right' ref='saveChildRef36'>
  95. 单色按钮
  96. </van-button>
  97. <van-button color='#7232dd' class='demo-margin-right' plain=" " ref='saveChildRef37'>
  98. 单色按钮
  99. </van-button>
  100. <van-button color='linear-gradient(to right, #4bb0ff, #6149f6)' ref='saveChildRef38'>
  101. 渐变色按钮
  102. </van-button>
  103. </demo-block>
  104. </view>