UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载徽标Badge是数据展示场景中最常用的反馈组件之一用于在图标、头像或文字块的右上角呈现消息条数。本指南以 ng-zorro-antd 的 基本用法示例 为骨架结合 Badge 组件源码 与 API 文档系统讲解nzCount计数的渲染规则、nzShowZero零值显隐控制的底层实现以及自定义计数模板等实战写法。读完本文你将能够独立配置出数字徽标、零值显示、图标计数、状态点、溢出封顶等完整方案并理解其内部滚动数字动画的原理。一、组件定位与适用场景Badge 一般出现在通知图标或头像的右上角用于显示需要处理的消息条数通过醒目的视觉形式吸引用户处理。在 ng-zorro-antd 中入口模块为NzBadgeModule公共 API组件选择器为nz-badge其核心职责有三数字徽标右上角圆形徽标数字如未读消息数、购物车商品数状态点仅显示一个小圆点配合nzStatus、nzText表达在线、错误、警告等状态缎带通过nz-ribbon在元素边缘展示强调性色带。本文聚焦第一种能力即包裹内容 展示计数的基础形态这正是 basic.md 演示的核心。二、基本用法包裹内容并展示计数nz-badge采用包裹宿主元素的模式把图标、链接或任意内容放进组件内部徽标会自动定位到宿主的右上角。完整的 基础示例代码 如下import { Component } from angular/core; import { NzBadgeModule } from ng-zorro-antd/badge; import { NzIconModule } from ng-zorro-antd/icon; Component({ selector: nz-demo-badge-basic, imports: [NzBadgeModule, NzIconModule], template: nz-badge [nzCount]5 a classhead-example/a /nz-badge nz-badge [nzCount]0 nzShowZero a classhead-example/a /nz-badge nz-badge [nzCount]iconTemplate a classhead-example/a /nz-badge ng-template #iconTemplate nz-icon nzTypeclock-circle classant-scroll-number-custom-component stylecolor: #f5222d / /ng-template , styles: nz-badge { margin-inline-end: 20px; } .head-example { width: 42px; height: 42px; border-radius: 4px; background: #eee; display: inline-block; vertical-align: middle; } }) export class NzDemoBadgeBasicComponent {}示例同时演示了三种核心形态普通数字徽标[nzCount]5显示数字5零值显隐控制[nzCount]0 nzShowZero数字为 0 时仍强制显示徽标模板计数[nzCount]iconTemplate将ng-template作为计数内容此时徽标内渲染的是一个clock-circle图标而非数字。需要特别注意的是示例中的.head-example样式只是演示用占位块实际项目中可以换成nz-icon、a、头像组件或任意自定义内容。从零构建最小示例在你的 Angular 项目中只需三步即可复现引入模块在组件的imports中加入NzBadgeModuleStandalone 组件直接引入传统模块则在NgModule中声明编写模板用nz-badge包裹目标内容并传入nzCount按需引入图标若使用模板计数或状态点还需引入NzIconModule与对应图标。三、核心输入属性nzCount 与 nzShowZero根据 Badge API 文档nz-badge与计数展示直接相关的输入属性如下参数说明类型默认值全局配置[nzCount]展示的数字大于nzOverflowCount时显示为${nzOverflowCount}为 0 时隐藏number \| TemplateRefvoid--[nzShowZero]当数值为 0 时是否展示 Badgebooleanfalse-[nzOverflowCount]展示封顶的数字值number99✅[nzDot]不展示数字只有一个小红点booleanfalse-[nzShowDot]是否展示小红点booleantrue-[nzSize]在设置了nzCount的前提下有效设置小圆点的大小default \| smalldefault-[nzOffset]设置状态点的位置偏移格式为[x, y]非独立使用时[number, number]--[nzTitle]设置鼠标放在状态点上时显示的文字非独立使用时为null时隐藏string \| nullnzCount-对基本用法而言两个最重要的属性是nzCount支持number与TemplateRefvoid两种类型。传入数字时渲染滚动数字传入模板时完全自定义计数内容如示例中的时钟图标。从 badge.component.ts 可以看到nzCount同时被NzOutletModule的nzStringTemplateOutlet消费因此也支持字符串。nzShowZero默认false。当其值为false且nzCount为 0 时徽标整体隐藏设为true后即使数字为 0 也会渲染一个0徽标这在新消息数为 0 也要让用户知道入口存在的产品需求中非常实用。四、源码级解析0 值隐藏与显示的判定逻辑nzShowZero为什么能控制显隐答案在 badge.component.ts 的ngOnChanges中ngOnChanges(changes: SimpleChanges): void { const { nzColor, nzShowDot, nzDot, nzCount, nzShowZero } changes; ... if (nzShowDot || nzDot || nzCount || nzShowZero) { this.showSup (this.nzShowDot this.nzDot) || (typeof this.nzCount number (this.nzCount 0 || this.nzShowZero)); } }可见「是否渲染徽标角标」由受保护的成员showSup决定判定规则为两个分支的或运算圆点模式nzShowDot nzDot为真即开启圆点且允许显示数字模式nzCount是数字且满足「大于 0」或「等于 0 但开了nzShowZero」。因此[nzCount]0且不设nzShowZero时第二个分支条件nzCount 0为假、nzShowZero为假showSup为false徽标隐藏——这正是 basic.md 中描述的行为Badge will be hidden whennzCountis0, but we can usenzShowZeroto show it.两个值得注意的实现细节nzShowZero、nzDot、nzShowDot均使用booleanAttribute转换badge.component.ts因此模板中既可以写nzShowZero属性简写形式也可以写[nzShowZero]true的绑定形式只有当nzCount是number类型时才参与0 值隐藏判定如果传入的是TemplateRef如示例中的图标则showSup直接为真模板计数始终显示。五、滚动数字与溢出封顶nz-badge-sup 的内部实现当showSup为真时badge.component.ts 会渲染内部组件nz-badge-sup选择器nz-badge-sup。这个小组件承担了徽标角标的全部视觉细节其模板逻辑badge-sup.component.ts包含两个关键分支if (count nzOverflowCount) { for (n of maxNumberArray; track n; let i $index) { span classant-scroll-number-only [style.transform]translateY( -countArray[i] * 100 %) ... /span } } else { {{ nzOverflowCount }} }滚动数字动画每个数位是一列 0–9 的纵向单元通过translateY(-count * 100%)滚动到目标数字形成经典的数字翻牌效果当countArray.length 2时还会追加ant-badge-multiple-words类以适配多位数宽度。溢出封顶当count nzOverflowCount时直接渲染为${nzOverflowCount}文本例如默认值 99 时[nzCount]200会显示99。该行为在 overflow 示例 中有直观演示其中还包含[nzOverflowCount]10、[nzOverflowCount]999的自定义封顶写法。数据派生ngOnChanges中把nzCount钳制为非负整数Math.max(0, nzCount)后按位拆分为countArraybadge-sup.component.ts负数计数值不会产生非法渲染。六、实战扩展动态计数、状态点与全局配置在基本用法之上结合仓库内其他示例可快速扩展出完整方案动态增减计数。参考 dynamic.ts使用signal维护count通过按钮addCount/minusCount/random更新minusCount中Math.max(0, count - 1)与源码的钳制逻辑一致避免负值。该示例同时用nz-switch切换nzDot演示红点模式。红点模式。参考 dot.tsnz-badge nzDot只显示一个小红点而不渲染数字适合有更新但不必显示数量的场景。状态点与预设色。nzStatus取值为success | processing | default | error | warning见 types.ts与nzText搭配可构成带文案的状态徽标。此外 preset-colors.ts 定义了pink/red/yellow/orange/cyan/green/blue/purple/geekblue/magenta/volcano/gold/lime共 13 种预设色nzColor命中预设色时会复用预设样式类而非内联背景色badge.component.ts。全局配置。nzOverflowCount与nzColor标注了全局配置 ✅可通过NzConfigService的setConfig(badge, { nzOverflowCount: 999 })全局统一默认值避免在每个组件上重复声明。七、小结ng-zorro-antd 的 Badge 基础用法以nzCount为数据入口、以nzShowZero控制 0 值显隐背后由showSup的布尔判定与nz-badge-sup的滚动数字渲染协同完成。掌握 basic.ts 中的三种写法数字、0 值、模板计数再结合溢出封顶、动态计数与状态点能力即可覆盖绝大多数消息提醒 / 数量展示交互场景。更多完整属性说明可继续阅读 Badge 组件文档 及 组件规格测试。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐如何快速获取安全APK安卓应用下载的终极指南如何快速获取安全APK安卓应用下载的终极指南 还在为安卓应用下载的烦恼而头疼吗找不到官方版本、担心病毒捆绑、想要特定历史版本却无处可寻今天我要为你推荐一个UI组件前端ng-zorro-antd Badge 小红点nzDot模式无需数字的徽标实现与源码原理ng zorro antd Badge 小红点nzDot模式无需数字的徽标实现与源码原理 在 ng zorro antd 中 nz badge 组件除了UI组件前端ng-zorro-antd Badge 徽标大小设置详解从 nzSize 参数到底层样式实现ng zorro antd Badge 徽标大小设置详解从 nzSize 参数到底层样式实现 在 ng zorro antd 中 nz badge 徽标UI组件前端上一篇BMAD-METHOD团队配置全解析选择适合你的AI开发梦之队下一篇Redux Thunk与Next.js图像优化状态驱动的图片加载创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考