NG-ZORROBadge徽标数
图标右上角的圆形徽标数字。
何时使用#
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
import { NzBadgeModule } from 'ng-zorro-antd/badge';代码演示
简单的徽章展示，当 nzCount 为 0 时，默认不显示，但是可以使用 nzShowZero 修改为显示。
加载中超过 nzOverflowCount 的会显示为 nzOverflowCount+，默认的 nzOverflowCount 为 99。
加载中用 a 标签进行包裹即可。
加载中用于表示状态的小圆点。
加载中And raises the spyglass.
Pushes open the window
使用缎带型的徽标。
加载中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
不包裹任何元素，增加 nzStandalone标签后，即是独立使用，可自定样式展现。
在右上角的 badge 则限定为红色。
加载中没有具体的数字。
加载中展示动态变化的效果。
加载中Presets:
Custom:
我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
加载中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] | 不展示数字，只有一个小红点 | boolean | false | |
[nzShowDot] | 是否展示小红点 | boolean | true | |
[nzOverflowCount] | 展示封顶的数字值 | number | 99 | ✅ |
[nzShowZero] | 当数值为 0 时，是否展示 Badge | boolean | false | |
[nzStatus] | 设置 nz-badge 为状态点 | 'success' | 'processing' | 'default' | 'error' | 'warning' | - | |
[nzText] | 在设置了 nzStatus 的前提下有效，设置状态点的文本 | string | TemplateRef<void> | - | |
[nzTitle] | 设置鼠标放在状态点上时显示的文字（非独立使用时), 为 null 时隐藏 | string | null | nzCount | |
[nzOffset] | 设置状态点的位置偏移，格式为 [x, y] (非独立使用时) | [number, number] | - |
nz-ribbon#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| nzColor | 自定义缎带的颜色 | string | - |
| nzPlacement | 缎带的位置 | start | end |
| nzText | 缎带中填入的内容 | string | TemplateRef<void> | - |