index.wxml 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Progress</view>
  4. <view class="page__desc">进度条</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Status</view>
  8. <wux-progress status="normal" percent="50" />
  9. <wux-white-space />
  10. <wux-progress status="progress" percent="50" />
  11. <wux-white-space />
  12. <wux-progress status="error" percent="50" />
  13. <wux-white-space />
  14. <wux-progress status="success" percent="50" />
  15. <view class="sub-title">ActiveColor</view>
  16. <wux-progress active-color="#11c1f3" percent="50" />
  17. <wux-white-space />
  18. <wux-progress active-color="#ffc900" percent="50" />
  19. <wux-white-space />
  20. <wux-progress active-color="#886aea" percent="50" />
  21. <view class="sub-title">BackgroundColor</view>
  22. <wux-progress background-color="#fff" percent="25" />
  23. <wux-white-space />
  24. <wux-progress background-color="#f3f3f3" percent="50" />
  25. <wux-white-space />
  26. <wux-progress background-color="#f8f8f8" percent="75" />
  27. <view class="sub-title">Shape</view>
  28. <wux-progress shape="square" percent="25" />
  29. <wux-white-space />
  30. <wux-progress shape="square" percent="50" />
  31. <wux-white-space />
  32. <wux-progress shape="square" percent="75" />
  33. <view class="sub-title">BarStyle</view>
  34. <wux-progress bar-style="background-color: #5cb85c" percent="25" />
  35. <wux-white-space />
  36. <wux-progress bar-style="background-color: #5bc0de" percent="50" />
  37. <wux-white-space />
  38. <wux-progress bar-style="background-color: #f0ad4e" percent="75" />
  39. <view class="sub-title">StrokeWidth</view>
  40. <wux-progress stroke-width="8" percent="25" />
  41. <wux-white-space />
  42. <wux-progress stroke-width="10" percent="50" />
  43. <wux-white-space />
  44. <wux-progress stroke-width="12" percent="75" />
  45. <view class="sub-title">ShowInfo</view>
  46. <wux-progress show-info percent="{{ percent }}" />
  47. <wux-progress show-info percent="{{ percent }}" />
  48. <wux-progress show-info percent="{{ percent }}" />
  49. <wux-button block type="light" bind:click="add">Add</wux-button>
  50. </view>
  51. </view>