• Badge徽标数
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-badgecomponent

    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. [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
    9. ></nz-badge>
    10. <nz-badge [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
    11. `,
    12. styles: [
    13. `
    14. nz-badge {
    15. margin-right: 20px;
    16. }
    17. `
    18. ]
    19. })
    20. 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 = [
    23. 'pink',
    24. 'red',
    25. 'yellow',
    26. 'orange',
    27. 'cyan',
    28. 'green',
    29. 'blue',
    30. 'purple',
    31. 'geekblue',
    32. 'magenta',
    33. 'volcano',
    34. 'gold',
    35. 'lime'
    36. ];
    37. }

    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]设置鼠标放在状态点上时显示的文字(非独立使用时)stringnzCount
    [nzOffset]设置状态点的位置偏移,格式为 x, y[number, number]-