徽標，紅點、數字或文字。用於告訴使用者待處理的事物或更新數。在右上方展示數字、文字、小紅點適用於產品化的新訊息、新功能、新服務等內容的提醒，通過醒目視覺形式吸引使用者處理。
屬性
屬性 | 類型 | 必填 | 預設值 | 說明 |
type | 'dot' | 'text' | 'bubble' | 'number' | 否 | 'dot' | badge 類型 'dot'：紅點 'number'：數字類型（會自動執行 >99 轉換操作） 'text'：文字氣泡 'bubble'：氣泡形態（帶箭頭） |
text | string | number | 否 | - | 紅點內容，為空白時表示只顯示紅點；可以是數字，也可以是文字；如果是數字，超過 99 會自動變成 |
placement | 'top-left' | 'top-right' | 否 | 'top-right' | 相對於 children 所在方位 top-left：左上方 top-right：右上方 |
stroke | boolean | 否 | false | 是否有描邊 |
iconType | string | 否 | - | 自訂表徵圖 |
bgColor | string | 否 | - | 自訂背景色，CSS 色值 |
className | string | 否 | - | 類名 |
樣式類
類名 | 說明 |
amd-badge | 整體樣式 |
amd-badge-inner-text | 內部文本樣式 |
amd-badge-text | 文本樣式 |
amd-badge-dot | 紅點樣式 |
amd-badge-icon | 表徵圖樣式 |
程式碼範例
基本使用
index.axml 的程式碼範例如下：
<view>
<demo-block title="基本用法">
<view class="badge-list">
<badge
type="dot"
position="top-right">
<view class="box"/>
</badge>
<badge
type="text"
text="新"
position="top-right">
<view class="box"/>
</badge>
<badge
type="number"
text="{{1}}"
position="top-right">
<view class="box"/>
</badge>
<badge
type="number"
text="{{100}}"
position="top-right">
<view class="box"/>
</badge>
<badge
type="bubble"
text="bubble類型"
position="top-right">
<view class="box"/>
</badge>
</view>
</demo-block>
<demo-block title="帶邊框">
<view class="badge-list">
<badge
type="dot"
stroke
position="top-right">
<view class="box dark"/>
</badge>
<badge
type="text"
text="新"
stroke
position="top-right">
<view class="box dark"/>
</badge>
<badge
type="number"
text="{{1}}"
stroke
position="top-right">
<view class="box dark"/>
</badge>
<badge
type="number"
text="{{100}}"
stroke
position="top-right">
<view class="box dark"/>
</badge>
<badge
type="bubble"
text="bubble類型"
stroke
position="top-right">
<view class="box dark"/>
</badge>
</view>
</demo-block>
<demo-block title="自訂色彩和位移量">
<view class="badge-list">
<badge
type="dot"
position="top-left">
<view class="box"/>
</badge>
<badge
type="dot"
position="top-right">
<view class="box"/>
</badge>
<badge
type="dot"
bgColor="green"
position="top-right">
<view class="box"/>
</badge>
</view>
</demo-block>
<demo-block title="自訂表徵圖">
<badge
type="text"
iconType="GlobalOutline"
position="top-right">
<view class="box"/>
</badge>
</demo-block>
</view>index.js 的程式碼範例如下：
Page({
data: {},
});index.acss 的程式碼範例如下：
.badge-list {
display: flex;
}
.badge-list .amd-badge {
margin-right: 32rpx;
}
.box {
background: #eee;
width: 40px;
height: 40px;
display: block;
border-radius: 8px;
}
.box.dark {
background: #666666;
}index.json 的程式碼範例如下：
{
"defaultTitle": "Badge",
"usingComponents": {
"badge": "antd-mini/es/Badge/index",
"demo-block": "../../components/DemoBlock/index"
}
}