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
{
"defaultTitle": "AntUI component library of the Mini Program",
"usingComponents": {
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index",
"badge": "mini-antui/es/badge/index"
}
}
<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>
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',
},
{
dot: false,
text: 100,
overflowCount: 99,
isWrap: false,
intro: 'The number exceeds overflowCount',
},
{
dot: false,
text: 'new',
isWrap: false,
intro: 'Text',
},
],
},
});