新闻详情

新闻详情

首页 / 资讯中心 / 详情

ng-zorro-antd 点状步骤条(nzProgressDot)完全指南:从基础用法到自定义模板

发布时间:2026/9/29 9:59:21来源:尧图网络
ng-zorro-antd 点状步骤条(nzProgressDot)完全指南:从基础用法到自定义模板
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文聚焦 ng-zorro-antd 中 Steps 步骤条组件的点状样式progress dot通过一个nzProgressDot属性即可把步骤条的圆形图标替换为更轻盈的圆点进度样式常用于引导类、流程类页面的紧凑展示。读完本文你将掌握点状步骤条的水平/垂直布局、boolean与TemplateRef两种配置方式、如何自定义圆点模板配合 Popover 实现悬停详情以及其背后的组件渲染与样式实现原理。点状步骤条是什么ng-zorro-antd 的 Steps 组件默认以图标 标题 描述的形式呈现每一步图标可以是序号、对勾或自定义图标。而点状步骤条Dot Style则把图标收敛为一个小圆点用圆点之间的连线表达步骤间的先后关系视觉上更轻量适合步骤较多、需要弱化图标干扰的场景。该演示位于仓库 components/steps/demo/progress-dot.md其配套示例代码为 components/steps/demo/progress-dot.ts。在 ng-zorro-antd 官方文档 components/steps/doc/index.zh-CN.md 中nzProgressDot的完整 API 定义为参数说明类型默认值[nzProgressDot]点状步骤条可以设置为一个 TemplateRefboolean \| TemplateRef{ $implicit: TemplateRefvoid, status: string, index: number }false从类型定义可以看出它支持两种形态直接传入booleantrue启用点状样式或传入一个自定义模板来深度定制每个圆点的渲染。基础用法一行属性开启点状样式在 progress-dot.ts 中最核心的用法就是在nz-steps上添加nzProgressDot属性等价于[nzProgressDot]trueimport { Component } from angular/core; import { NzDividerModule } from ng-zorro-antd/divider; import { NzStepsModule } from ng-zorro-antd/steps; Component({ selector: nz-demo-steps-progress-dot, imports: [NzDividerModule, NzStepsModule], template: nz-steps [nzCurrent]1 nzProgressDot nz-step nzTitleFinished nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps nz-divider / nz-steps [nzCurrent]1 nzProgressDot nzDirectionvertical nz-step nzTitleFinished nzDescriptionThis is a description. This is a description. / nz-step nzTitleFinished nzDescriptionThis is a description. This is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. This is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps }) export class NzDemoStepsProgressDotComponent {}要点拆解[nzCurrent]1指定当前步骤下标从 0 开始与默认步骤条的行为完全一致下标小于nzCurrent的步骤自动变为finish已完成等于nzCurrent的步骤为process进行中大于的为wait等待中。第一组为默认的水平方向nzDirection默认值即horizontal第二组通过nzDirectionvertical切换为竖直方向适合步骤较多或窄屏场景。两组示例之间使用nz-divider /分隔仅用于演示排版不属于点状步骤条本身的必需配置。每个nz-step的nzTitle与nzDescription同时支持string与TemplateRefvoid两种类型见 step.component.ts可灵活注入模板内容。组件内部如何切换点状模式点状样式不是独立的组件而是nz-steps的一个属性驱动的渲染分支。看 steps.component.ts 的关键实现export type NzProgressDotTemplate TemplateRef{ $implicit: TemplateRefvoid; status: string; index: number }; // ... Input() set nzProgressDot(value: boolean | NzProgressDotTemplate | undefined | null) { if (value instanceof TemplateRef) { this.showProcessDot true; this.customProcessDotTemplate value; } else { this.showProcessDot toBoolean(value); } this.updateChildrenSteps(); }来源steps.component.ts 与 steps.component.ts这里揭示了两个关键机制类型分流setter 用value instanceof TemplateRef判断传入的是模板还是布尔值。传TemplateRef时不仅开启点状模式还会把该模板保存为customProcessDotTemplate传true/false时仅通过toBoolean归一化为布尔值控制开关。状态下推updateChildrenSteps()会把showProcessDot等状态逐一下发给每个NzStepComponent由子组件决定渲染圆点还是常规图标。对应地宿主元素上的 CSS 类绑定steps.component.ts会在点状模式下追加ant-steps-dot类[class.ant-steps-dot]: showProcessDot而nz-step内部step.component.ts在showProcessDot为真时渲染圆点模板if (showProcessDot) { span classant-steps-icon ng-template #processDotTemplate span classant-steps-icon-dot/span /ng-template ng-template [ngTemplateOutlet]customProcessTemplate || processDotTemplate [ngTemplateOutletContext]{ $implicit: processDotTemplate, status: nzStatus, index: index } / /span }默认情况下圆点就是那个.ant-steps-icon-dot元素一旦提供了自定义模板customProcessTemplate就用它替换默认圆点同时把默认圆点、当前状态status、步骤下标index作为上下文注入——这正是自定义能力的实现基础。自定义圆点让圆点承载更多信息点状步骤条的进阶用法是传入TemplateRef完全自定义每个圆点。仓库中对应的官方示例为 customized-progress-dot.ts它在圆点上叠加了 Popover 悬停提示import { NgTemplateOutlet } from angular/common; import { Component } from angular/core; import { NzPopoverModule } from ng-zorro-antd/popover; import { NzStepsModule } from ng-zorro-antd/steps; Component({ selector: nz-demo-steps-customized-progress-dot, imports: [NgTemplateOutlet, NzStepsModule, NzPopoverModule], template: nz-steps [nzCurrent]1 [nzProgressDot]progressTemplate nz-step nzTitleFinished nzDescriptionYou can hover on the dot. / nz-step nzTitleIn Progress nzDescriptionYou can hover on the dot. / nz-step nzTitleWaiting nzDescriptionYou can hover on the dot. / nz-step nzTitleWaiting nzDescriptionYou can hover on the dot. / /nz-steps ng-template #progressTemplate let-dot let-statusstatus let-indexindex span nz-popover nzPopoverContentsteps {{ index }} status: {{ status }} stylemargin-left: -100%; ng-template [ngTemplateOutlet]dot / /span /ng-template }) export class NzDemoStepsCustomizedProgressDotComponent {}使用模板时有三条规则必须遵守模板上下文let-dot拿到的是$implicit即默认圆点模板本身通常要原样渲染回去以保留圆点外观let-statusstatus与let-indexindex分别拿到该步骤的状态字符串wait/process/finish/error和下标。这与 API 文档中声明的TemplateRef{ $implicit: TemplateRefvoid, status: string, index: number }一一对应。必须引入NgTemplateOutlet因为要在自定义模板里用ng-template [ngTemplateOutlet]dot /重新渲染默认圆点所以示例中导入了NgTemplateOutlet。保留默认圆点结构最佳实践是把默认圆点作为自定义模板内部的最小单元再在外面包一层交互容器如示例中的nz-popover避免破坏步骤条的视觉基线。状态与布局联动点状模式完全兼容nz-steps的其余 API在 components/steps/doc/index.zh-CN.md 中均有定义常用组合如下状态控制nzStatus可显式指定为wait | process | finish | error默认process单个nz-step也可用自身的nzStatus覆盖整体状态。点状模式下状态主要影响圆点的填充色与连线颜色process状态的圆点会被放大突出见下文样式部分。方向控制nzDirection支持horizontal默认与vertical。竖直点状步骤条在 progress-dot.less 中有专门样式分支.ant-steps-vertical.ant-steps-dot调整了圆点的margin-top与连接线位置使竖排布局对齐更准确。尺寸控制nzSize支持default与small点状模式下同样生效样式文件中的.ant-steps-dot.ant-steps-small组合选择器即为小尺寸点状步骤条准备的。标签位置nzLabelPlacement在点状模式开启时宿主会额外绑定ant-steps-label-vertical类见 steps.component.ts保证点状样式下标签仍可正确排版。样式实现细节圆点与连接线点状模式的全部视觉样式集中在 components/steps/style/progress-dot.less并通过 components/steps/style/index.less 中的import ./progress-dot;引入。几个值得注意的实现点圆点本体.ant-steps-icon-dot使用border-radius: 100px形成圆形并带有transition: all 0.3s的过渡动画其::after伪元素向外扩展出 60px × 32px 的透明热区background: fade(black, 0.1%)用来放大可点击/可悬停的交互面积。连接线点状模式下的 tail连接线用width: calc(100% - 20px)的 3px 横线连接相邻圆点margin-inline-start与描述区最大宽度steps-description-max-width联动保证线与描述文字对齐。进行中放大.ant-steps-item-process下的图标容器会切换为更大的steps-current-dot-size并向上偏移 1px用当前圆点更大的视觉语言强化流程焦点。此外step.component.ts 中还有与点状样式相关的showProgress逻辑当某个步骤设置了nzPercentage且状态为process、无自定义图标、数值在 0~100 之间时会在步骤图标处渲染nz-progress圆形进度环。注意该进度环与点状模式是互斥的——点状模式下showProcessDot为真时不会走进度环渲染分支这是选择两种展示风格时需要知晓的边界。小结点状步骤条是 ng-zorro-antd Steps 组件中一个以小博大的特性入口只有一个nzProgressDot属性却同时提供了boolean快速开关与TemplateRef深度定制两种能力且与方向、尺寸、状态、标签位置等既有 API 完全正交兼容。从 steps.component.ts 的属性分流与状态下推到 step.component.ts 的圆点模板插槽再到 progress-dot.less 的样式体系三个层次共同保证了点状步骤条既开箱即用、又可随心定制。如需在项目中复现直接参考 progress-dot.ts 与 customized-progress-dot.ts 两份官方示例即可更多 Steps 参数nzStartIndex、nzIndexChange、nzDisabled等可查阅 components/steps/doc/index.zh-CN.md 的完整 API 表。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Pagination 上一步/下一步自定义渲染nzItemRender 模板完全指南ng zorro antd Pagination 上一步/下一步自定义渲染nzItemRender 模板完全指南 本篇技术指南聚焦 ng zorro antdUI组件前端ng-zorro-antd Progress 自定义渐变进度条nzStrokeColor 从用法到源码原理ng zorro antd Progress 自定义渐变进度条nzStrokeColor 从用法到源码原理 本文围绕 ng zorro antd 的 ProgUI组件前端ng-zorro-antd 线性进度条Progress line 类型完全指南从基础用法到源码解析ng zorro antd 线性进度条Progress line 类型完全指南从基础用法到源码解析 nz progress 是 ng zorro antdUI组件前端上一篇从0到1理解xMIG工作流GPU故障监控与即时恢复全解析下一篇ANNC算子优化原理揭秘GEMM和Softmax算子如何接入OpenBLAS与XNNPACK创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Cursor 编辑器小技巧:用鼠标滚轮调节文字大小,顺带把 TaoToken 统一 Key 配进 settings.json 2026/9/29 9:58:57

Cursor 编辑器小技巧:用鼠标滚轮调节文字大小,顺带把 TaoToken 统一 Key 配进 settings.json

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
MCP 重回 HTTP 范式:用 TaoToken 统一 Key 打通 Cline 与 settings.json 配置骨架 2026/9/29 9:58:57

MCP 重回 HTTP 范式:用 TaoToken 统一 Key 打通 Cline 与 settings.json 配置骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
Qt Creator 打开 .pro 只有工程文件?项目树空白的五大原因与修复方法 2026/9/29 9:58:57

Qt Creator 打开 .pro 只有工程文件?项目树空白的五大原因与修复方法

1. 现象还原与问题定性先说说这个问题的典型画面:你双击一个.pro文件,Qt Creator 打开了,但左侧项目树里只有一个孤零零的.pro文件,没有main.cpp,没有头文件,连Headers和Sources分组都看不到。或者你刚用Ne…

阅读更多 →
fuel 安装openstack 记录 2026/9/29 9:58:57

fuel 安装openstack 记录

这几天 接到老大们的指令 说要搞openstack 可是我还是两年搭建过openstack的 现在一头雾水 好在 知道openstack的官网 先看看有什么工具 能快速搭建openstack 找了一圈发现了 fuel 这个貌似比较 ok 先试试吧, 但是马上问题有来了 看到网上都说的 Oracle VM Vi…

阅读更多 →
车载测试入门:从信号层验证到三维测试框架构建 2026/9/29 9:58:50

车载测试入门:从信号层验证到三维测试框架构建

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
Git从安装到实战:版本控制原理、分支合并与SSH配置全攻略 2026/9/29 9:58:50

Git从安装到实战:版本控制原理、分支合并与SSH配置全攻略

如果你搜到这里,大概率不是想听“Git是一个分布式版本控制系统”这种教科书定义,而是遇到了具体问题:git安装不上、装上了系统不识别、提交代码报错、分支合并搞出冲突,或者单纯想把日常工作里反复敲的那几条命令真正搞明白。我最…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉