Badge

2023-04-28 21:00

Red dot, number or text. Used to tell users there are some updates.

Property	Description	Type	Default	Required
text	Number or text to be displayed.	String/Number		No
dot	Show a red dot instead of number.	Boolean		No
overflowCount	Top number to be shown, “+” shown for more.	Number	99	No

Slots

slotName	Description
inner	Optional, when badge is wrapper, it is used to render the internal region.

Example

copy
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "list": "mini-antui/es/list/index",
    "list-item": "mini-antui/es/list/list-item/index",
    "badge": "mini-antui/es/badge/index"
  }
}

copy
<view>
  <list>
    <block a:for="{{items}}">
      <list-item
        arrow="{{true}}"
        index="{{index}}"
        key="items-{{index}}"
        last="{{index === (items.length - 1)}}"
      >
        <view>
          <badge a:if="{{item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}">
            <view slot="inner" style="height: 26px; width: 26px; background-color: #ddd;"></view>
          </badge>
          <text style="margin-left: \{\{ item.isWrap ? '12px' : '0' \}\}">{{item.intro}}</text>
        </view>
        <view slot="extra">
          <badge a:if="{{item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}" overflowCount="{{item.overflowCount}}" /> 
        </view>
      </list-item>
    </block>
  </list>
</view>

copy
Page({
  data: {
    items: [
      {
        dot: true,
        text: '',
        isWrap: true,
        intro: 'Dot Badge',
      },
      {
        dot: false,
        text: 1,
        isWrap: true,
        intro: 'Text Badge',
      },
      {
        dot: false,
        text: 99,
        isWrap: false,
        intro: 'Number Badge',
      },
      {
        dot: false,
        text: 100,
        overflowCount: 99,
        isWrap: false,
        intro: 'OverflowCount',
      },
      {
        dot: false,
        text: 'new',
        isWrap: false,
        intro: 'Text Badge',
      },
    ],
  },
});