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），仅供参考