Badge徽标数

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

何时使用#

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

代码演示

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-basic',
  template: `
    <nz-badge [nzCount]="5">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="0" nzShowZero>
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="iconTemplate">
      <a class="head-example"></a>
    </nz-badge>
    <ng-template #iconTemplate>
      <i nz-icon type="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
    </ng-template>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
        vertical-align: middle;
      }
    `
  ]
})
export class NzDemoBadgeBasicComponent {}

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

99+10+999+

超过 nzOverflowCount 的会显示为 nzOverflowCount+,默认的 nzOverflowCount99

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-overflow',
  template: `
    <nz-badge [nzCount]="99">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="200">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="200" [nzOverflowCount]="10">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="10000" [nzOverflowCount]="999">
      <a class="head-example"></a>
    </nz-badge>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
        vertical-align: middle;
      }
    `
  ]
})
export class NzDemoBadgeOverflowComponent {}

Success
Error
Default
Processing
Warning

用于表示状态的小圆点。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-status',
  template: `
    <nz-badge nzStatus="success"></nz-badge>
    <nz-badge nzStatus="error"></nz-badge>
    <nz-badge nzStatus="default"></nz-badge>
    <nz-badge nzStatus="processing"></nz-badge>
    <nz-badge nzStatus="warning"></nz-badge>
    <br />
    <nz-badge nzStatus="success" nzText="Success"></nz-badge>
    <br />
    <nz-badge nzStatus="error" nzText="Error"></nz-badge>
    <br />
    <nz-badge nzStatus="default" nzText="Default"></nz-badge>
    <br />
    <nz-badge nzStatus="processing" nzText="Processing"></nz-badge>
    <br />
    <nz-badge nzStatus="warning" nzText="Warning"></nz-badge>
    <br />
  `
})
export class NzDemoBadgeStatusComponent {}

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

99+

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

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-no-wrapper',
  template: `
    <nz-badge [nzCount]="25"></nz-badge>
    <nz-badge
      [nzCount]="4"
      [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
    ></nz-badge>
    <nz-badge [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }
    `
  ]
})
export class NzDemoBadgeNoWrapperComponent {}

没有具体的数字。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-dot',
  template: `
    <nz-badge nzDot><i nz-icon type="notification"></i></nz-badge>
    <nz-badge nzDot [nzShowDot]="false"><i nz-icon type="notification"></i></nz-badge>
    <nz-badge nzDot>
      <a>Link something</a>
    </nz-badge>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      [nz-icon] {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
      }
    `
  ]
})
export class NzDemoBadgeDotComponent {}

0

1

2

3

4

5

6

7

8

9

展示动态变化的效果。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-change',
  template: `
    <div>
      <nz-badge [nzCount]="count">
        <a class="head-example"></a>
      </nz-badge>
      <nz-button-group>
        <button nz-button (click)="minCount()"><i nz-icon type="minus"></i></button>
        <button nz-button (click)="addCount()"><i nz-icon type="plus"></i></button>
      </nz-button-group>
    </div>

    <div style="margin-top: 10px;">
      <nz-badge [nzDot]="dot">
        <a class="head-example"></a>
      </nz-badge>
      <nz-switch [(ngModel)]="dot"></nz-switch>
    </div>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
        vertical-align: middle;
      }
    `
  ]
})
export class NzDemoBadgeChangeComponent {
  count = 5;
  dot = true;

  addCount(): void {
    this.count++;
  }

  minCount(): void {
    this.count--;
    if (this.count < 0) {
      this.count = 0;
    }
  }
}

Presets:

pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime

Custom:

#f50
#2db7f5
#87d068
#108ee9

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-badge-colorful',
  template: `
    <div>
      <h4 style="margin-bottom: 16px">Presets:</h4>
      <div *ngFor="let color of colors">
        <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
      </div>
      <h4 style="margin:16px 0">Custom:</h4>
      <nz-badge nzColor="#f50" nzText="#f50"></nz-badge>
      <br />
      <nz-badge nzColor="#2db7f5" nzText="#2db7f5"></nz-badge>
      <br />
      <nz-badge nzColor="#87d068" nzText="#87d068"></nz-badge>
      <br />
      <nz-badge nzColor="#108ee9" nzText="#108ee9"></nz-badge>
    </div>
  `
})
export class NzDemoBadgeColorfulComponent {
  colors = [
    'pink',
    'red',
    'yellow',
    'orange',
    'cyan',
    'green',
    'blue',
    'purple',
    'geekblue',
    'magenta',
    'volcano',
    'gold',
    'lime'
  ];
}

API#

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

单独引入此组件#

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

import { NzBadgeModule } from 'ng-zorro-antd';

nz-badge#

参数说明类型默认值
[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-