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），仅供参考
企业数字化 ERP 产品动态
相关推荐
双一流文科生秋招上岸，网申效率才是拉开差距的关键 个人背景某双一流高校行政管理专业25届本科生，2024年7月开始准备秋招。
方向定得比较早：央国企、银行、加上部分事业单位，互联网大厂基本没投。
原因很简单，家里人偏向稳定的工作节奏，我自己也是这个想法。
7月和8月那… · 2026/9/27 4:42:20
《创业之路》-968-万物终极真相：所有命运与规律，都是秩序的层层落地 系统的大道、天道、趋势、规律。
表面是道法自然、显性规则；
中层是道德、人情、人性；
深层是权力意志、规则制定。系统中的个体的因果、命运、结果、现状。
表面是言行、努力、能力、经验；
中层是认知、性格、选择、战略；
深层是… · 2026/9/27 4:42:14
4路CAN FD+零安装+LTE远程：汽车总线调试工具全解析 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 4:42:14
Syncthing VMware虚拟机安装与生产级使用教程 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 5:30:28
Jetson Orin NX稳定接入联适R70M-GNSS串口调优全指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 5:30:22
应届生做需求预测要学什么？2027届秋招备考指南 一、应届生做需求预测需要学什么
应届生做需求预测，核心要学的是数据分析能力，包括SQL、Excel、统计学和业务理解，而不是单纯学某个预测算法。从2026年校招JD看，需求预测类岗位（供应链计划、商品计划、运营分析方向&am… · 2026/9/27 5:30:15
深度树Depth Tree方法论：unlazy如何把大任务拆到N层让AI智能体不再偷懒 深度树Depth Tree方法论：unlazy如何把大任务拆到N层让AI智能体不再偷懒 【免费下载链接】unlazy Anti-laziness skill for AI agents. Core: the Depth Tree method, which splits a task N layers deep and gives every leaf the full time budget of the whole ta… · 2026/9/27 5:30:15
【数据科学】【财务领域】【会计学】第六篇 业务财务融合101 ICT产品01 覆盖云安全、云运维、云数据库、云网络等细分领域。 序号 场景 关键因素 详细描述与策略 核心计算方程式（含联立方程组与数值示例） 时序任务和流程 对内发布任务 对内部协商沟通和博弈 B1 云堡垒机（Cloud Bastion Host / Cloud Asset Management）按资产数/用户数… · 2026/9/27 5:30:15
【Codex官方添加1M上下文支持】 Codex官方添加1M上下文支持Codex配置文件：[config.toml]在文件顶部、任何 [配置分组] 之前添加：
model_context_window 1000000
model_auto_compact_token_limit 900000第一项：上下文窗口设为 100 万 token。第二项：约 90 万 t… · 2026/9/27 5:30:09
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
