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

    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 type="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.       [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';
    3. @Component({
    4.   selector: 'nz-demo-badge-dot',
    5.   template: `
    6.     <nz-badge nzDot><i nz-icon type="notification"></i></nz-badge>
    7.     <nz-badge nzDot [nzShowDot]="false"><i nz-icon type="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 type="minus"></i></button>
    12.         <button nz-button (click)="addCount()"><i nz-icon type="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 = [
    24.     'pink',
    25.     'red',
    26.     'yellow',
    27.     'orange',
    28.     'cyan',
    29.     'green',
    30.     'blue',
    31.     'purple',
    32.     'geekblue',
    33.     'magenta',
    34.     'volcano',
    35.     'gold',
    36.     'lime'
    37.   ];
    38. }

    API

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

    单独引入此组件

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

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

    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-