Badge 徽标请使用手机扫码体验

出现在图标或文字右上角的红色圆点、数字或者文字,表示有新内容或者待处理的信息。

基本用法

  1. html
    <nut-badge
  2. :value="9"
  3. class="item"
  4. >
  5. <div class="demo-svg"></div>
  6. </nut-badge>
  7. <nut-badge
  8. :value="9"
  9. class="item"
  10. >
  11. 购物车
  12. </nut-badge>
  13. <nut-badge
  14. :value="9"
  15. class="item"
  16. >
  17. <nut-button>
  18. 购物车
  19. </nut-button>
  20. </nut-badge>

Max用法

  1. html
    <nut-badge
  2. :value="200"
  3. :max="99"
  4. class="item"
  5. >
  6. <div class="demo-svg"></div>
  7. </nut-badge>
  8. <nut-badge
  9. :value="200"
  10. :max="99"
  11. class="item"
  12. >
  13. 购物车
  14. </nut-badge>
  15. <nut-badge
  16. :value="200"
  17. :max="99"
  18. class="item"
  19. >
  20. <nut-button>
  21. 购物车
  22. </nut-button>
  23. </nut-badge>

文字用法

  1. html
    <nut-badge
  2. value="new"
  3. class="item"
  4. >
  5. <div class="demo-svg"></div>
  6. </nut-badge>
  7. <nut-badge
  8. value="new"
  9. class="item"
  10. >
  11. 购物车
  12. </nut-badge>
  13. <nut-badge
  14. value="new"
  15. :max="99"
  16. class="item"
  17. >
  18. <nut-button>
  19. 购物车
  20. </nut-button>
  21. </nut-badge>

小圆点

  1. html
    <nut-badge
  2. :isDot="true"
  3. class="item"
  4. >
  5. <div class="demo-svg"></div>
  6. </nut-badge>
  7. <nut-badge
  8. :isDot="true"
  9. class="item"
  10. >
  11. 文字内容
  12. </nut-badge>
  13. <nut-badge
  14. :isDot="true"
  15. :max="99"
  16. class="item"
  17. >
  18. <nut-button>
  19. 购物车
  20. </nut-button>
  21. </nut-badge>

自定义位置

  1. html
    <nut-badge
  2. :value="200"
  3. top="5px"
  4. right="10px"
  5. class="item"
  6. >
  7. <div class="demo-svg">
  8. </div>
  9. </nut-badge>

Prop

字段说明类型默认值
value显示的内容String-
maxvalue为数值时,最大值Number10000
zIndex徽标的z-index值Number10
isDot是否为小点Booleanfalse
hidden是否隐藏Booleanfalse
top上下偏移量,支持单位设置,可设置为:5px、5rem等String0
left左右偏移量,支持单位设置,可设置为:5px、5rem等String0

Badge 徽标 - 图1