如何使用徽标Badge_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

徽标，红点、数字或文字。用于告诉用户待处理的事物或更新数。在右上角展示数字、文字、小红点适用于产品化的新消息、新功能、新服务等内容的提醒，通过醒目视觉形式吸引用户处理。

属性

属性	类型	必填	默认值	说明
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"
  }
}