Badge 标记

出现在按钮、图标旁的数字或状态标记。

基础用法

展示新消息数量。

<el-badge [model]="12" class="item">
  <el-button size="small">评论</el-button>
</el-badge>
<el-badge [model]="3" class="item">
  <el-button size="small">回复</el-button>
</el-badge>

最大值

可自定义最大值。

由 max 属性定义， 需要注意的是，只有当 model 为 number 时，它才会生效。

<el-badge [model]="200" [max]="99" class="item">
  <el-button size="small">评论</el-button>
</el-badge>
<el-badge [model]="100" [max]="10" class="item">
  <el-button size="small">回复</el-button>
</el-badge>

自定义内容

可以显示数字以外的文本内容。

<el-badge model="new" class="item">
  <el-button size="small">评论</el-button>
</el-badge>
<el-badge model="hot" class="item">
  <el-button size="small">回复</el-button>
</el-badge>

小红点

以红点的形式标注需要关注的内容。

<el-badge [is-dot]="true" class="item">数据查询</el-badge>
<el-badge [is-dot]="true" class="item">
  <el-button class="share-button" icon="share" type="primary"></el-button>
</el-badge>

Badge Attributes