Badge

2024-05-31 10:14

Mini-program developers can use the Badge component to create badges to notify users of pending tasks or new updates in mini programs. It effectively grabs users' attention and encourages them to take relevant actions. This topic covers the user experience, attributes, and sample code for the Badge component.

User experience

The following image shows different badges on a mini-program interface:

badge1.jpg.png

Attributes

Attribute	Data type	Default	Description
className	String	N/A	The class name for the component's root node.
style	Object	N/A	The style for the component.
type	String	`dot`	The badge type. Valid values are: `dot`: A red solid dot. `number`: A round bubble that displays numbers. If the number is greater than 99, it is displayed as `99+`. `text`: A round bubble that displays text. `bubble`: A speech bubble.
bgColor	String	N/A	The background color of the badge.
text	String, Number, Slot	N/A	The content displayed on the badge. Specify this attribute using numbers or text. Notes: Numbers larger than 99 are displayed as `99+`. No content is displayed if this attribute is not specified.
position	String	`top-right`	The badge's position to the container. Valid values are: `top-left`: Place the badge at the top-left corner of the container. `top-right`: Place the badge at the top-right corner of the container. `top-center`: Place the badge at the center of the top edge of the container. `left`: Place the badge at the center of the left edge of the container. `right`: Place the badge at the center of the right edge of the container. `bottom-left`: Place the badge at the bottom-left corner of the container. `bottom-center`: Place the badge at the center of the bottom edge of the container. `bottom-right`: Place the badge at the bottom-right corner of the container.
offsetX	String	`'-50%'`	The horizontal offset of the badge.
offsetY	String	`'-50%'`	The vertical offset of the badge.
stroke	Boolean	`false`	Whether to outline the badge.

Sample code

The following sample code demonstrates how to create badges that are shown in User experience:

.axml

copy
<ant-container title="Basic usage">
  <view class="badge-list">
    <ant-badge
      type="dot"
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 2 }}"
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 100 }}"
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      position="top-right">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Outlined badges">
  <view class="badge-list">
    <ant-badge
      type="dot"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 1 }}"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 100 }}"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Customize background and position">
  <view class="badge-list">
    <ant-badge
      position="right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="1"
      position="bottom-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 100 }}"
      stroke
      bgColor="#1677FF">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="text"
      text="new"
      bgColor="#FF9F18"
      position="top-center">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      stroke
      bgColor="#34B368">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Offset badges">
  <view class="badge-list">
    <ant-badge
      type="text"
      text="1"
      offsetX="-20px"
      offsetY="0px">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="text"
      text="1"
      position="bottom-right"
      offsetX="-20px"
      offsetY="-14px">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      position="top-right"
      offsetX="2px"
      offsetY="-8px">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Customize badge content">
  <view class="badge-list">
    <ant-badge
      type="text"
      position="top-right">
      <ant-icon
        type="GlobalOutline"
        slot="text" />
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

.js

copy
Page({
    data: {},
});

.acss

copy
page {
  padding: 24rpx;
}
.badge-list {
  display: flex;
}
.ant-badge {
  margin-right: 16px;
}
.box {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 8px;
  background: #b3b3b3;
}

.json

copy
{
  "defaultTitle": "Badge",
  "usingComponents": {
    "ant-badge": "antd-mini/es/Badge/index",
    "ant-container": "antd-mini/es/Container/index",
    "ant-icon": "antd-mini/es/Icon/index"
  }
}