Badge徽标数

图标右上角的圆形徽标数字。

何时使用

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

  1. import { NzBadgeModule } from 'ng-zorro-antd/badge';

代码演示

Badge徽标数 - 图1

基本

简单的徽章展示，当 nzCount 为 0 时，默认不显示，但是可以使用 nzShowZero 修改为显示。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-basic',
  5.   template: `
  6.     <nz-badge [nzCount]="5">
  7.       <a class="head-example"></a>
  8.     </nz-badge>
  9.     <nz-badge [nzCount]="0" nzShowZero>
  10.       <a class="head-example"></a>
  11.     </nz-badge>
  12.     <nz-badge [nzCount]="iconTemplate">
  13.       <a class="head-example"></a>
  14.     </nz-badge>
  15.     <ng-template #iconTemplate>
  16.       <i nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
  17.     </ng-template>
  18.   `,
  19.   styles: [
  20.     `
  21.       nz-badge {
  22.         margin-right: 20px;
  23.       }
  25.       .head-example {
  26.         width: 42px;
  27.         height: 42px;
  28.         border-radius: 4px;
  29.         background: #eee;
  30.         display: inline-block;
  31.         vertical-align: middle;
  32.       }
  33.     `
  34.   ]
  35. })
  36. export class NzDemoBadgeBasicComponent {}

Badge徽标数 - 图2

封顶数字

超过 nzOverflowCount 的会显示为 nzOverflowCount+，默认的 nzOverflowCount 为 99。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-overflow',
  5.   template: `
  6.     <nz-badge [nzCount]="99">
  7.       <a class="head-example"></a>
  8.     </nz-badge>
  9.     <nz-badge [nzCount]="200">
  10.       <a class="head-example"></a>
  11.     </nz-badge>
  12.     <nz-badge [nzCount]="200" [nzOverflowCount]="10">
  13.       <a class="head-example"></a>
  14.     </nz-badge>
  15.     <nz-badge [nzCount]="10000" [nzOverflowCount]="999">
  16.       <a class="head-example"></a>
  17.     </nz-badge>
  18.   `,
  19.   styles: [
  20.     `
  21.       nz-badge {
  22.         margin-right: 20px;
  23.       }
  25.       .head-example {
  26.         width: 42px;
  27.         height: 42px;
  28.         border-radius: 4px;
  29.         background: #eee;
  30.         display: inline-block;
  31.         vertical-align: middle;
  32.       }
  33.     `
  34.   ]
  35. })
  36. export class NzDemoBadgeOverflowComponent {}

Badge徽标数 - 图3

可点击

用 a 标签进行包裹即可。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-link',
  5.   template: `
  6.     <a>
  7.       <nz-badge [nzCount]="5">
  8.         <a class="head-example"></a>
  9.       </nz-badge>
  10.     </a>
  11.   `,
  12.   styles: [
  13.     `
  14.       .head-example {
  15.         width: 42px;
  16.         height: 42px;
  17.         border-radius: 4px;
  18.         background: #eee;
  19.         display: inline-block;
  20.         vertical-align: middle;
  21.       }
  22.     `
  23.   ]
  24. })
  25. export class NzDemoBadgeLinkComponent {}

Badge徽标数 - 图4

状态点

用于表示状态的小圆点。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-status',
  5.   template: `
  6.     <nz-badge nzStatus="success"></nz-badge>
  7.     <nz-badge nzStatus="error"></nz-badge>
  8.     <nz-badge nzStatus="default"></nz-badge>
  9.     <nz-badge nzStatus="processing"></nz-badge>
  10.     <nz-badge nzStatus="warning"></nz-badge>
  11.     <br />
  12.     <nz-badge nzStatus="success" nzText="Success"></nz-badge>
  13.     <br />
  14.     <nz-badge nzStatus="error" nzText="Error"></nz-badge>
  15.     <br />
  16.     <nz-badge nzStatus="default" nzText="Default"></nz-badge>
  17.     <br />
  18.     <nz-badge nzStatus="processing" nzText="Processing"></nz-badge>
  19.     <br />
  20.     <nz-badge nzStatus="warning" nzText="Warning"></nz-badge>
  21.     <br />
  22.   `
  23. })
  24. export class NzDemoBadgeStatusComponent {}

Badge徽标数 - 图5

独立使用

不包裹任何元素即是独立使用，可自定样式展现。

在右上角的 badge 则限定为红色。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-no-wrapper',
  5.   template: `
  6.     <nz-badge [nzCount]="25"></nz-badge>
  7.     <nz-badge
  8.       [nzCount]="4"
  9.       class="site-badge-count-4"
  10.       [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
  11.     ></nz-badge>
  12.     <nz-badge [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
  13.   `,
  14.   styles: [
  15.     `
  16.       nz-badge {
  17.         margin-right: 20px;
  18.       }
  19.     `
  20.   ]
  21. })
  22. export class NzDemoBadgeNoWrapperComponent {}

Badge徽标数 - 图6

讨嫌的小红点

没有具体的数字。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-dot',
  5.   template: `
  6.     <nz-badge nzDot><i nz-icon nzType="notification"></i></nz-badge>
  7.     <nz-badge nzDot [nzShowDot]="false"><i nz-icon nzType="notification"></i></nz-badge>
  8.     <nz-badge nzDot>
  9.       <a>Link something</a>
  10.     </nz-badge>
  11.   `,
  12.   styles: [
  13.     `
  14.       nz-badge {
  15.         margin-right: 20px;
  16.       }
  18.       [nz-icon] {
  19.         width: 16px;
  20.         height: 16px;
  21.         line-height: 16px;
  22.         font-size: 16px;
  23.       }
  24.     `
  25.   ]
  26. })
  27. export class NzDemoBadgeDotComponent {}

Badge徽标数 - 图7

动态

展示动态变化的效果。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-change',
  5.   template: `
  6.     <div>
  7.       <nz-badge [nzCount]="count">
  8.         <a class="head-example"></a>
  9.       </nz-badge>
  10.       <nz-button-group>
  11.         <button nz-button (click)="minCount()"><i nz-icon nzType="minus"></i></button>
  12.         <button nz-button (click)="addCount()"><i nz-icon nzType="plus"></i></button>
  13.       </nz-button-group>
  14.     </div>
  16.     <div style="margin-top: 10px;">
  17.       <nz-badge [nzDot]="dot">
  18.         <a class="head-example"></a>
  19.       </nz-badge>
  20.       <nz-switch [(ngModel)]="dot"></nz-switch>
  21.     </div>
  22.   `,
  23.   styles: [
  24.     `
  25.       nz-badge {
  26.         margin-right: 20px;
  27.       }
  29.       .head-example {
  30.         width: 42px;
  31.         height: 42px;
  32.         border-radius: 4px;
  33.         background: #eee;
  34.         display: inline-block;
  35.         vertical-align: middle;
  36.       }
  37.     `
  38.   ]
  39. })
  40. export class NzDemoBadgeChangeComponent {
  41.   count = 5;
  42.   dot = true;
  44.   addCount(): void {
  45.     this.count++;
  46.   }
  48.   minCount(): void {
  49.     this.count--;
  50.     if (this.count < 0) {
  51.       this.count = 0;
  52.     }
  53.   }
  54. }

Badge徽标数 - 图8

多彩徽标

我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-badge-colorful',
  5.   template: `
  6.     <div>
  7.       <h4 style="margin-bottom: 16px">Presets:</h4>
  8.       <div *ngFor="let color of colors">
  9.         <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
  10.       </div>
  11.       <h4 style="margin:16px 0">Custom:</h4>
  12.       <nz-badge nzColor="#f50" nzText="#f50"></nz-badge>
  13.       <br />
  14.       <nz-badge nzColor="#2db7f5" nzText="#2db7f5"></nz-badge>
  15.       <br />
  16.       <nz-badge nzColor="#87d068" nzText="#87d068"></nz-badge>
  17.       <br />
  18.       <nz-badge nzColor="#108ee9" nzText="#108ee9"></nz-badge>
  19.     </div>
  20.   `
  21. })
  22. export class NzDemoBadgeColorfulComponent {
  23.   colors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
  24. }

API

  1. <nz-badge [nzCount]="5">
  2.   <a class="head-example"></a>
  3. </nz-badge>
  1. <nz-badge [nzCount]="5"></nz-badge>

nz-badgecomponent

参数说明类型默认值全局配置
[nzColor]自定义小圆点的颜色string-✅
[nzCount]展示的数字，大于 nzOverflowCount 时显示为 ${nzOverflowCount}+，为 0 时隐藏number | TemplateRef<void>-
[nzDot]不展示数字，只有一个小红点booleanfalse
[nzShowDot]是否展示小红点booleantrue
[nzOverflowCount]展示封顶的数字值number99✅
[nzShowZero]当数值为 0 时，是否展示 Badgebooleanfalse
[nzStatus]设置 nz-badge 为状态点‘success’ | ‘processing’ | ‘default’ | ‘error’ | ‘warning’-
[nzText]在设置了 nzStatus 的前提下有效，设置状态点的文本string-
[nzTitle]设置鼠标放在状态点上时显示的文字（非独立使用时), 为 null 时隐藏string | nullnzCount
[nzOffset]设置状态点的位置偏移，格式为 x, y[number, number]-