Badge徽标数

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

何时使用#

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

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

代码演示

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

基本

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

expand codeexpand code
      加载中

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+，默认的 nzOverflowCount 为 99。

expand codeexpand code
      加载中

0

1

2

3

4

5

6

7

8

9

自定义位置偏移

设置状态点的位置偏移，格式为 [left, top]，表示状态点距默认位置左侧、上方的偏移量。

expand codeexpand code
      加载中

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

大小

可以设置有数字徽标的大小。

expand codeexpand code
      加载中
Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies
缎带

使用缎带型的徽标。

expand codeexpand code
      加载中

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+
独立使用

不包裹任何元素，增加 nzStandalone标签后，即是独立使用，可自定样式展现。

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

expand codeexpand code
      加载中
Link something
讨嫌的小红点

没有具体的数字。

expand codeexpand code
      加载中

0

1

2

3

4

5

6

7

8

9


动态

展示动态变化的效果。

expand codeexpand code
      加载中

Success
Error
Default
Processing
Warning
状态点

用于表示状态的小圆点。

expand codeexpand code
      加载中

Presets:

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

Custom:

#f50
#2db7f5
#87d068
#108ee9
多彩徽标

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

expand codeexpand code
      加载中

API#

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

nz-badge#

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

nz-ribbon#

参数说明类型默认值
nzColor自定义缎带的颜色string-
nzPlacement缎带的位置startend
nzText缎带中填入的内容string | TemplateRef<void>-