UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd 中nz-badge组件除了可以展示数字徽标nzCount外还内置了一种讨嫌的小红点Red badge模式通过nzDot属性让组件只显示一个没有具体数字的小红点通常用于提示有新内容但无需告知数量的场景例如新消息提醒、功能更新提示。本文将围绕 dot.md 这一官方示例讲解小红点模式的完整用法、相关 API 参数并结合组件源码剖析其底层实现原理帮助你准确地在业务中落地这一交互形态。小红点模式与数字徽标的本质区别默认情况下nz-badge通过nzCount展示一个带数字的徽标而当不需要显示具体数量时可以使用nzDot切换到纯圆点形态。两者的区别可以从官方 API 表见 index.zh-CN.md中直接看出参数说明类型默认值[nzDot]不展示数字只有一个小红点booleanfalse[nzShowDot]是否展示小红点booleantrue[nzCount]展示的数字大于nzOverflowCount时显示为${nzOverflowCount}为 0 时隐藏number \| TemplateRefvoid-在源码实现中nzDot与nzShowDot共同决定红点是否渲染。具体逻辑位于 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即开启nzDot且未被nzShowDot关闭时显示小红点数字路径nzCount为数字且大于 0或设置了nzShowZero时显示数字徽标。两条路径互不干扰因此红点模式本质上就是一种不携带数字的角标形态。基础用法包裹任意内容小红点模式典型的应用方式是将nz-badge作为包装容器包裹图标、链接或任意 UI 元素红点会自动定位在内容的右上角。官方示例 dot.ts 给出了最直接的写法import { Component } from angular/core; import { NzBadgeModule } from ng-zorro-antd/badge; import { NzIconModule } from ng-zorro-antd/icon; Component({ selector: nz-demo-badge-dot, imports: [NzBadgeModule, NzIconModule], template: nz-badge nzDot nz-icon nzTypenotification / /nz-badge nz-badge nzDot aLink something/a /nz-badge , styles: nz-badge { margin-inline-end: 20px; } nz-icon { font-size: 16px; } }) export class NzDemoBadgeDotComponent {}要点说明使用前需引入NzBadgeModule来自ng-zorro-antd/badge示例同时引入NzIconModule以渲染图标nzDot采用 Angular 属性布尔转换Input({ transform: booleanAttribute }) nzDot false因此在模板中仅书写nzDot即等同于[nzDot]true红点跟随被包裹元素渲染当包裹a链接时红点同样位于链接右上角用于提示链接指向的内容有新动态。若你想用更小的尺寸展示数字徽标但不想显示具体数字也可以将nzDot与其他属性组合例如配合nzShowZero控制 0 值场景下的显隐见下文。关键参数详解围绕红点模式的完整配置结合 badge.component.ts 中的输入属性定义以下参数与小红点模式直接相关值得逐一掌握参数类型默认值作用[nzDot]booleanfalse是否以红点代替数字[nzShowDot]booleantrue是否展示红点可用于条件性隐藏[nzStandalone]booleanfalse是否独立使用不包裹内容[nzColor]string-自定义小红点的颜色[nzCount]number \| TemplateRefvoid-数字徽标的值红点模式下不传[nzShowZero]booleanfalse当数值为 0 时是否展示徽标动态显隐nzShowDot的条件控制nzShowDot默认值为true。当业务上需要有新动态才显示红点时可以将其与一个响应式状态绑定nz-badge [nzDot]true [nzShowDot]hasUnread() nz-icon nzTypenotification / /nz-badge当hasUnread()返回false时根据 badge.component.ts 的判定逻辑showSup为false红点不会渲染返回true时红点出现。这是实现新消息提醒最常用的方式。自定义颜色nzColor与预设色红点默认使用主题高亮色样式文件中为highlight-color见 index.less。需要自定义时传入nzColornz-badge nzDot nzColor#52c41a nz-icon nzTypenotification / /nz-badge若传入的值命中预设颜色列表preset-colors.ts 中定义pink、red、yellow、orange、cyan、green、blue、purple、geekblue、magenta、volcano、gold、lime组件会将其识别为预设色并生成对应的状态类否则按普通颜色处理。相关逻辑见 badge.component.ts。独立使用nzStandalone如果不希望红点包裹任何内容可同时使用nzStandalone让红点独立展示组件源码在 host 上会附加ant-badge-not-a-wrapper类见 badge.component.tsnz-badge nzDot nzStandalone/nz-badge源码原理红点如何被渲染出来组件结构nz-badge与nz-badge-supnz-badge组件模板badge.component.ts在showSup为真时渲染内部组件nz-badge-sup并透传nzDot、nzColor、nzOffset、nzSize、nzTitle、nzStyle等输入。nz-badge-supbadge-sup.component.ts根据nzDot在 host 上挂载不同的类名[class.ant-badge-count]: !nzDot, [class.ant-badge-dot]: nzDot,当nzDot为true时角标元素获得ant-badge-dot类从而走红点样式否则走ant-badge-count的数字样式数字部分还会滚动动画逐位切换。这也是示例文档中没有具体的数字在样式层面的直接体现红点模式下模板中数字滚动单元ant-scroll-number-only不会渲染badge-sup.component.ts 中if (!nzDot ...)的判断。样式实现定位与外观红点的视觉样式定义在 index.less-dot { z-index: zindex-badge; width: badge-dot-size; min-width: badge-dot-size; height: badge-dot-size; background: highlight-color; border-radius: 100%; box-shadow: 0 0 0 badge-shadow-size badge-shadow-color; }同时ant-badge-count、ant-badge-dot等类通过position: absolute; top: 0; inset-inline-end: 0; transform: translate(50%, -50%)实现贴附在内容右上角的定位index.less。inset-inline-end保证了在 RTL 布局下红点仍能正确落在右上角。尺寸变量badge-dot-size等由主题配置决定可通过自定义主题调整。测试验证红点模式的渲染断言仓库的单元测试 badge.spec.ts 对红点模式做了直接验证it(should dot work, () { fixture.detectChanges(); expect(badgeElement.nativeElement.querySelector(nz-badge-sup).classList).not.toContain(ant-badge-dot); testComponent.dot.set(true); fixture.detectChanges(); expect(badgeElement.nativeElement.querySelector(nz-badge-sup).classList).toContain(ant-badge-dot); });该测试印证了切换nzDot后nz-badge-sup元素会相应获得或移除ant-badge-dot类——这与我们前面分析的 host 类绑定逻辑完全一致。如果你在业务中自定义红点样式也可以据此断言类名的变化。实践总结适用场景只需要有/无二态提示、不需要展示具体数量的提醒新消息、新功能、待处理事项等核心写法nz-badge nzDot包裹图标或链接配合nzShowDot做条件显隐配合nzColor做颜色定制配合nzStandalone独立展示底层逻辑showSup由nzShowDot nzDot或数字条件决定红点渲染依赖nz-badge-sup上的ant-badge-dot类样式由 index.less 中的ant-badge-dot规则提供扩展阅读完整的 API 参数说明见 index.zh-CN.md 与 index.en-US.md其余使用场景可参考同目录下的 basic.md、dynamic.md、offset.md、no-wrapper.md 等示例。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Badge 徽标大小设置详解从 nzSize 参数到底层样式实现ng zorro antd Badge 徽标大小设置详解从 nzSize 参数到底层样式实现 在 ng zorro antd 中 nz badge 徽标UI组件前端antd Badge dot 模式完全指南不带数字的红色圆点徽标原理与实战antd Badge dot 模式完全指南不带数字的红色圆点徽标原理与实战 Ant Designantd的 Badge 徽标组件除了展示数字计数还提供了前端UI组件设计系统ng-zorro-antd Badge 可点击用法用 a 标签包裹实现可链接徽标附源码原理解析ng zorro antd Badge 可点击用法用 a 标签包裹实现可链接徽标附源码原理解析 导读 本文围绕 ng zorro antdAngulaUI组件前端上一篇legit非技术用户指南设计师也能玩转Git下一篇告别Git仓库臃肿BFG与LFS联手打造极速清理方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考