全部产品
云市场

徽标(Badge)

更新时间:2020-03-26 14:51:34

徽标(Badge)为红点、数字或文字,用于告诉用户待处理的事物或者更新数。

属性名 描述 类型 默认值 必选
text 展示的数字或文案 String / Number - false
dot 不展示数字,只有一个小红点 Boolean - false
overflowCount 展示封顶的数字值,超出部分用“+”号表示 Number 99 false

slots

slotName 说明
inner 可选,badge 作为 wrapper 时,用于渲染内部的区域

代码示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "badge": "mini-antui/es/badge/index"
  7. }
  8. }
  1. <view>
  2. <list>
  3. <block a:for="{{items}}">
  4. <list-item
  5. arrow="{{true}}"
  6. index="{{index}}"
  7. key="items-{{index}}"
  8. last="{{index === (items.length - 1)}}"
  9. >
  10. <view>
  11. <badge a:if="{{item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}">
  12. <view slot="inner" style="height: 26px; width: 26px; background-color: #ddd;"></view>
  13. </badge>
  14. <text style="margin-left: {{ item.isWrap ? '12px' : '0' }}">{{item.intro}}</text>
  15. </view>
  16. <view slot="extra">
  17. <badge a:if="{{!item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}" overflowCount="{{item.overflowCount}}" />
  18. </view>
  19. </list-item>
  20. </block>
  21. </list>
  22. </view>
  1. Page({
  2. data: {
  3. items: [
  4. {
  5. dot: true,
  6. text: '',
  7. isWrap: true,
  8. intro: 'Dot Badge',
  9. },
  10. {
  11. dot: false,
  12. text: 1,
  13. isWrap: true,
  14. intro: 'Text Badge',
  15. },
  16. {
  17. dot: false,
  18. text: 99,
  19. isWrap: false,
  20. intro: '数字',
  21. },
  22. {
  23. dot: false,
  24. text: 100,
  25. overflowCount: 99,
  26. isWrap: false,
  27. intro: '数字超过overflowCount',
  28. },
  29. {
  30. dot: false,
  31. text: 'new',
  32. isWrap: false,
  33. intro: '文字',
  34. },
  35. ],
  36. },
  37. });