Badge 徽标数

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

何时使用 #

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

代码演示

简单的徽章展示。

超过 nzOverflowCount 的会显示为 {{ '${nzOverflowCount}+' }}

没有具体的数字。

用于表示状态的小圆点。

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

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

用 a 标签进行包裹即可

展示动态变化的效果。

API

nz-badge

参数 说明 类型 默认值
nzCount 展示的数字,大于 nzOverflowCount 时显示为 nzOverflowCount+为 0 时隐藏 Number
nzOverflowCount 展示封顶的数字值 Number 99
nzShowZero 当添加该属性时,当数值为 0 时,展示 Badge attribute -
nzDot 不展示数字,只有一个小红点 Boolean false
nzStatus 设置 Badge 为状态点 'success', 'processing, 'default', 'error', 'warning'
nzText 在设置了 nzStatus的前提下有效,设置状态点的文本 String