UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文基于 ng-zorro-antd 组件库中float-button组件的「徽标数Badge」官方示例系统讲解如何为悬浮按钮FloatButton右上角附加圆形徽标数字或状态圆点。你将掌握NzFloatButtonBadge接口的全部字段含义与默认值、nzBadge在单个按钮/按钮组/回到顶部按钮三种形态下的用法以及它底层如何复用 Badge 组件完成渲染可直接落地到自己的 Angular 项目中。一、示例总览右上角附带圆形徽标数字的悬浮按钮「徽标数」是 float-button 组件 的官方演示之一其说明文档 demo/badge.md 的核心描述为右上角附带圆形徽标数字的悬浮按钮。FloatButton with Badge.该能力自v20.4.0起通过[nzBadge]属性提供见 doc/index.zh-CN.md 中共同的 API 表格。完整示例代码位于 demo/badge.ts一个页面内同时演示了三种形态import { Component } from angular/core; import { NzFloatButtonModule } from ng-zorro-antd/float-button; Component({ selector: nz-demo-float-button-badge, imports: [NzFloatButtonModule], template: div classgroup nz-float-button nzShapecircle [nzBadge]{ nzDot: true } styleinset-inline-end: 164px / nz-float-button-group nzShapecircle styleinset-inline-end: 94px nz-float-button [nzBadge]{ nzCount: 5, nzColor: blue } / nz-float-button [nzBadge]{ nzCount: 5 } / /nz-float-button-group nz-float-button-group nzShapecircle nz-float-button [nzBadge]{ nzCount: 12 } nzIconquestion-circle / nz-float-button [nzBadge]{ nzCount: 123, nzOverflowCount: 999 } / nz-float-button-top [nzVisibilityHeight]0 [nzBadge]{ nzDot: true } / /nz-float-button-group /div , styles: .group { height: 300px; position: relative; } nz-float-button-group { position: absolute; } nz-float-button { position: absolute; } }) export class NzDemoFloatButtonBadgeComponent {}页面中的三个元素分别覆盖了徽标的核心使用场景元素徽标配置演示要点单个nz-float-button{ nzDot: true }纯圆点徽标不显示数字nz-float-button-group第一个{ nzCount: 5, nzColor: blue }与{ nzCount: 5 }分组内每个按钮各自携带数字徽标可自定义颜色nz-float-button-group第二个{ nzCount: 12 }、{ nzCount: 123, nzOverflowCount: 999 }、{ nzDot: true }数字徽标 图标按钮 溢出阈值调高 回到顶部按钮带圆点三者通过inset-inline-end进行横向排布父容器.group高度 300px 并设置position: relative子元素position: absolute实现绝对定位——这也是「悬浮按钮」在页面角落常见的定位方式。二、NzFloatButtonBadge接口全解8 个字段逐个说明[nzBadge]的类型为NzFloatButtonBadge它在 typings.ts 中定义本质上是NzFloatButtonBadgeProps的 Partial 版本即每个字段都可选export interface NzFloatButtonBadgeProps { nzShowZero: boolean; nzDot: boolean; nzOverflowCount: number; nzColor: string; nzCount: number | TemplateRefvoid; nzOffset: [number, number]; nzSize: NzSizeDSType; } export type NzFloatButtonBadge PartialNzFloatButtonBadgeProps;官方 API 文档doc/index.zh-CN.md同时给出注释该接口是从NzBadge组件属性中移除nzShowDot、nzTitle、nzStatus、nzText后的子集。各字段含义如下字段说明默认值依据 Badge 组件源码nzDot是否为圆点徽标不显示数字传true时同时作用于 Badge 的nzDot与nzShowDotfalsenzCount徽标显示的数字支持number或TemplateRefvoid自定义内容无传入才显示nzShowZero当nzCount为 0 时是否仍显示徽标falsenzOverflowCount数字溢出阈值超过后显示为nzOverflowCount99nzColor徽标背景颜色支持预设色如blue或任意颜色值无nzOffset徽标偏移量[x, y]数组形式无nzSize徽标尺寸default \| smalldefault其中nzShowZero、nzOverflowCount、nzColor、nzOffset、nzSize、nzDot、nzCount均与 Badge 组件nz-badge 的输入属性一一对应因此默认值以 Badge 组件的实现为准nzOverflowCount默认99、nzShowZero默认false、nzSize默认default。三、源码级原理nzBadge如何被渲染出来nzBadge的实现链路分为三层FloatButton 外壳 → 内容组件 → Badge 组件。第一层NzFloatButtonComponent接收并透传在 float-button.component.ts 中nzBadge被声明为输入信号并连同nzIcon、nzDescription、nzShape一起传给内部的nz-float-button-contentreadonly nzBadge inputNzFloatButtonBadge | null(null); // ... nz-float-button-content [nzBadge]nzBadge() [nzIcon]nzIcon() [nzDescription]nzDescription() [nzShape]shape() /第二层NzFloatButtonContentComponent桥接到nz-badge真正的渲染逻辑在 float-button-content.component.ts当nzBadge()存在时用nz-badge包裹按钮主体并把NzFloatButtonBadge的各字段逐个映射到 Badge 组件if (nzBadge()) { nz-badge [nzDot]nzBadge()?.nzDot [nzShowDot]nzBadge()?.nzDot [nzCount]nzBadge()?.nzCount [nzShowZero]nzBadge()?.nzShowZero [nzOverflowCount]nzBadge()?.nzOverflowCount! [nzColor]nzBadge()?.nzColor [nzOffset]nzBadge()?.nzOffset [nzSize]nzBadge()?.nzSize || default ng-container *ngTemplateOutletbutton / /nz-badge } else { ng-container *ngTemplateOutletbutton / }值得注意的细节nzDot同时被绑定到 Badge 的nzDot和nzShowDot两个输入。这是因为在 Badge 组件中showSup的计算条件为(nzShowDot nzDot) || (nzCount 0 || nzShowZero)见 badge.component.ts如此绑定才能保证圆点模式必然显示。若不传nzBadge则走else分支直接渲染按钮主体行为与旧版一致。第三层Badge 组件的数字显示规则数字徽标是否出现由 Badge 内部逻辑决定当nzCount为数字且nzCount 0或nzCount 0且nzShowZero为true时显示数字超过nzOverflowCount时显示为nzOverflowCount。示例中{ nzCount: 123, nzOverflowCount: 999 }即通过调高阈值让 123 直接显示而不变成99。四、组合场景分组按钮与回到顶部按钮的徽标分组中的徽标nz-float-button-group内部直接投影ng-content见 float-button-group.component.ts每个子按钮各自持有独立的nzBadge。示例中两个分组分别演示了「同色系 5、5」与「不同图标、不同数量」的徽标组合。分组会通过effect把自身的nzShape同步到所有子按钮见 float-button-group.component.ts所以示例中只需在分组上声明一次nzShapecircle。回到顶部按钮的徽标nz-float-button-top同样声明了readonly nzBadge inputNzFloatButtonBadge | null(null)见 float-button-top.component.ts并在模板中把nzBadge()透传给内部的nz-float-button。示例使用[nzVisibilityHeight]0让回到顶部按钮一进入页面即出现默认需滚动超过 400px见 doc/index.zh-CN.md再叠加{ nzDot: true }圆点徽标常用于提示「有未读/新状态」的场景。五、实战要点与注意事项模块引入使用前需在组件或独立组件中引入NzFloatButtonModuleimports: [NzFloatButtonModule]它同时导出nz-float-button、nz-float-button-group、nz-float-button-top三个指令形态。徽标位置徽标默认出现在按钮右上角无需额外配置需要微调时可使用nzOffset: [x, y]。颜色取值nzColor既支持预设色名如blue会映射为对应的 antd 语义色类名见 badge.component.ts 中的presetColor判定也支持任意 CSS 颜色值。溢出显示不指定nzOverflowCount时超过 99 的数字会显示为99如需展示完整数字如示例中的 123务必手动调高阈值。数字与圆点互斥nzDot: true时以圆点呈现nzCount数字不会叠加显示二者按需二选一。RTL 支持FloatButton 组件已接入Directionality见 float-button.component.ts在 RTL 布局下徽标随按钮整体镜像示例中使用的inset-inline-end逻辑属性也天然适配左右布局。版本前提nzBadge自20.4.0起可用使用前请确认项目所依赖的ng-zorro-antd版本不低于该版本。六、小结悬浮按钮搭配徽标是「全局功能入口 状态提示」组合的常见 UI 模式。通过本文你可以确认[nzBadge]接受NzFloatButtonBadge对象其字段是 Badge 组件的精简子集渲染链路为 FloatButton →nz-float-button-content→nz-badge圆点模式通过nzDot同时驱动nzDot与nzShowDot保证显示溢出、零值、颜色、尺寸等细节默认值均继承自 Badge 组件。若需进一步研究可继续阅读 float-button 组件文档、typings.ts 以及 Badge 组件源码。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd 头像徽标Avatar with Badge实战指南消息提醒的完整实现与源码解析ng zorro antd 头像徽标Avatar with Badge实战指南消息提醒的完整实现与源码解析 带徽标的头像With Badge是 ngUI组件前端ng-zorro-antd Badge 徽标组件完全指南nz-badge 与 nz-ribbon 的 API 详解、源码剖析与实战示例ng zorro antd Badge 徽标组件完全指南nz badge 与 nz ribbon 的 API 详解、源码剖析与实战示例 导读 Badge徽标UI组件前端ng-zorro-antd FloatButton 文字描述全解nzDescription 属性的用法、限制与源码实现ng zorro antd FloatButton 文字描述全解 nzDescription 属性的用法、限制与源码实现 nzDescription 是 ngUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考