index.wxml 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Badge</view>
  4. <view class="page__desc">徽章</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="example">
  8. <wux-badge dot>
  9. <view class="example__badge"></view>
  10. </wux-badge>
  11. </view>
  12. <view class="example">
  13. <wux-badge count="0" show-zero>
  14. <view class="example__badge"></view>
  15. </wux-badge>
  16. </view>
  17. <view class="example">
  18. <wux-badge count="3">
  19. <view class="example__badge"></view>
  20. </wux-badge>
  21. </view>
  22. <view class="example">
  23. <wux-badge count="100">
  24. <view class="example__badge"></view>
  25. </wux-badge>
  26. </view>
  27. <view class="example">
  28. <wux-badge count="9999" overflow-count="1024" hide-shadow>
  29. <view class="example__badge"></view>
  30. </wux-badge>
  31. </view>
  32. <view class="example">
  33. <wux-badge count="66" />
  34. </view>
  35. <view class="example">
  36. <wux-badge title="新消息!" />
  37. </view>
  38. <view class="example">
  39. <wux-badge count="88" wux-class-badge="bg-green" />
  40. </view>
  41. <view></view>
  42. <view class="example">
  43. <wux-badge status="success" />
  44. </view>
  45. <view class="example">
  46. <wux-badge status="error" />
  47. </view>
  48. <view class="example">
  49. <wux-badge status="default" />
  50. </view>
  51. <view class="example">
  52. <wux-badge status="processing" />
  53. </view>
  54. <view class="example">
  55. <wux-badge status="warning" />
  56. </view>
  57. <view></view>
  58. <view class="example">
  59. <wux-badge status="success" text="Success" />
  60. </view>
  61. <view class="example">
  62. <wux-badge status="error" text="Error" />
  63. </view>
  64. <view class="example">
  65. <wux-badge status="default" text="Default" />
  66. </view>
  67. <view class="example">
  68. <wux-badge status="processing" text="Processing" />
  69. </view>
  70. <view class="example">
  71. <wux-badge status="warning" text="Warning" />
  72. </view>
  73. <view></view>
  74. <view class="example">
  75. <wux-badge dot position="topLeft" backgroundColor="#52c41a">
  76. <view class="example__badge"></view>
  77. </wux-badge>
  78. </view>
  79. <view class="example">
  80. <wux-badge dot position="topRight" backgroundColor="#1890ff">
  81. <view class="example__badge"></view>
  82. </wux-badge>
  83. </view>
  84. <view class="example">
  85. <wux-badge dot position="bottomLeft" backgroundColor="#f5222d">
  86. <view class="example__badge"></view>
  87. </wux-badge>
  88. </view>
  89. <view class="example">
  90. <wux-badge dot position="bottomRight" backgroundColor="#faad14">
  91. <view class="example__badge"></view>
  92. </wux-badge>
  93. </view>
  94. </view>
  95. </view>