All Products
Search
Document Center

Badge

Last Updated: Feb 04, 2021

The badge is a red dot, a number, or text used to remind users of what to do or the number of updates.

Property Description Type Default value Mandatory
text Number or text displayed. String / Number - false
dot Displays a red dot only. Boolean - false
overflowCount Displays the maximum number allowed. A plus sign (+) is used to indicate the excess part. Number 99 false

slots

slotName Description
inner Used to render the internal area when the badge is used as wrapper. This property is optional.

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  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: 'Number',
  21. },
  22. {
  23. dot: false,
  24. text: 100,
  25. overflowCount: 99,
  26. isWrap: false,
  27. intro: 'The number exceeds overflowCount',
  28. },
  29. {
  30. dot: false,
  31. text: 'new',
  32. isWrap: false,
  33. intro: 'Text',
  34. },
  35. ],
  36. },
  37. });