Badge徽标数

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

何时使用

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

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

代码演示

Badge徽标数 - 图1

基本

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

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

Badge徽标数 - 图2

封顶数字

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

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

Badge徽标数 - 图3

可点击

用 a 标签进行包裹即可。

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

Badge徽标数 - 图4

状态点

用于表示状态的小圆点。

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

Badge徽标数 - 图5

独立使用

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

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

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

Badge徽标数 - 图6

讨嫌的小红点

没有具体的数字。

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

Badge徽标数 - 图7

动态

展示动态变化的效果。

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

Badge徽标数 - 图8

多彩徽标

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

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

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]-