★ FEATURED ARTICLE UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文以 ng-zorro-antd基于 Ant Design 的 Angular UI 组件库Steps 组件的「竖直方向的步骤条Vertical」Demo 为切入点完整讲解nzDirectionvertical的用法、nz-steps/nz-step的核心 API、竖直方向的布局与连线样式实现以及状态推导、尺寸变体等进阶主题。读完本文你将能够在 Angular 项目中熟练搭建竖直步骤条并理解其底层运行机制。一、Demo 定位与完整示例在仓库中竖直方向步骤条的官方示例位于 vertical.md 与其配套的 vertical.ts。该 Demo 的定位信息如下顺序order4排在simple基础用法、start-index起始序号等示例之后中文标题竖直方向的步骤条英文标题Vertical说明文案简单的竖直方向的步骤条zh-CN/A simple step bar in the vertical direction.en-US。与极简的说明文案不同配套的 Demo 代码完整展示了实现一个竖直步骤条所需的全部要素import { Component } from angular/core; import { NzStepsModule } from ng-zorro-antd/steps; Component({ selector: nz-demo-steps-vertical, imports: [NzStepsModule], template: nz-steps [nzCurrent]1 nzDirectionvertical nz-step nzTitleFinished nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps }) export class NzDemoStepsVerticalComponent {}这段代码揭示了竖直步骤条的三个核心配置点nzDirectionvertical将整个步骤条切换为竖直方向这是本文的主题[nzCurrent]1指定当前步骤为第 2 步从 0 开始计数由此自动推导出三个步骤的状态分别为finish、process、waitnz-step的nzTitle与nzDescription为每个步骤提供标题与详情描述。使用方式上只需在模块中导入NzStepsModule见 steps.module.ts其导出入口统一收口于 public-api.ts 与 index.ts即可直接使用nz-steps与nz-step标签。二、核心开关nzDirection参数及其源码实现竖直方向的核心是nz-steps组件上的nzDirection输入属性。在 steps.component.ts 中可以看到它的类型定义与默认值export type NzDirectionType horizontal | vertical; Input() nzDirection: NzDirectionType horizontal;也就是说nzDirection取值仅有两个horizontal水平默认与vertical竖直。当设置为vertical时组件宿主元素的 class 会随之变化host: { class: ant-steps, [class.ant-steps-horizontal]: nzDirection horizontal, [class.ant-steps-vertical]: nzDirection vertical, // ... }从源码结构看nzDirection通过ngOnChanges触发updateChildrenSteps()进而把方向值下发给每一个nz-step子组件step.direction this.nzDirection用于子组件的内部逻辑与样式判定。因此切换方向只需改动这一个属性不需要调整任何nz-step的写法。三、nz-step子步骤标题、描述与状态自动推导竖直步骤条中每个步骤由nz-step渲染。其模板结构见 step.component.ts包含三块图标区ant-steps-item-icon、标题区ant-steps-item-title可含nzSubtitle子标题与描述区ant-steps-item-description。关键输入属性一览完整 API 见下文第五节属性说明类型默认值nzTitle标题string \| TemplateRefvoid-nzSubtitle子标题string \| TemplateRefvoid-nzDescription详情描述可选string \| TemplateRefvoid-nzIcon自定义图标类型string \| string[] \| Setstring \| { [klass: string]: any; } \| TemplateRefvoid-nzStatus指定状态不配置时由nzCurrent自动推导wait \| process \| finish \| errorwaitnzDisabled禁用点击booleanfalsenzPercentageprocess状态步骤显示的进度百分比仅基本类型nz-steps生效number-Demo 中[nzCurrent]1的状态推导逻辑在NzStepComponent.currentIndex的 setter 中实现step.component.tsset currentIndex(current: number) { this._currentIndex current; if (!this.isCustomStatus) { this._status current this.index ? finish : current this.index ? this.outStatus || : wait; } }即当步骤序号小于nzCurrent时为finish已完成等于nzCurrent时为process进行中大于时为wait等待中。这与 Demo 中 Finished / In Progress / Waiting 三个步骤的展示一一对应。若某一步需要特殊状态如error可通过nz-step上的nzStatus单独覆盖。四、竖直布局的样式实现vertical.less剖析竖直方向之所以能呈现「步骤纵向排布、序号与内容左右分行、步骤间以竖线连接」的视觉效果其样式核心在 vertical.less。关键实现点如下整体容器改为纵向 flex.{steps-prefix-cls}-vertical { display: flex; flex-direction: column; }每个步骤项纵向排列、图标左浮、内容占满剩余宽度图标通过float: inline-start与右侧内容并排内容区min-height: 48px保证竖直方向的呼吸感标题行高与图标尺寸对齐line-height: steps-icon-size描述底部留白12px。步骤之间的连接竖线tail竖直方向的连接线不再是水平线而是沿图标中心下行的1px竖线 .{steps-prefix-cls}-item .{steps-prefix-cls}-item-container .{steps-prefix-cls}-item-tail { position: absolute; top: 0; inset-inline-start: steps-vertical-tail-width - 1; width: 1px; height: 100%; padding: steps-icon-size 6px 0 6px; ::after { width: 1px; height: 100%; } }同时最后一个步骤项不渲染 tail:not(:last-child)才显示对应组件模板中if (!last)的条件判断标题行右侧的水平::after线在竖直模式下被隐藏display: none。这段样式与 RTL 等国际化场景兼容使用inset-inline-start等逻辑属性也说明了nzDirection本质上是通过切换宿主 classant-steps-vertical来驱动上述布局规则的。五、进阶竖直小型步骤条与更多组合用法竖直方向同样支持nzSizesmall的迷你尺寸变体官方示例见 vertical-small.tsnz-steps [nzCurrent]1 nzDirectionvertical nzSizesmall nz-step nzTitleFinished nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps小型变体的样式同样由 vertical.less 处理在.{steps-prefix-cls}-small分支下tail 竖线的内边距与标题行高改用小型图标尺寸steps-small-icon-size计算。此外nz-steps支持与竖直方向组合的其他特性包括nzProgressDot点状步骤条可传boolean或自定义TemplateRef上下文含status与index竖直模式下同样生效nzStatus设置wait/process/finish/error作为当前步骤状态配合nzCurrent控制整体流程error状态会渲染关闭图标并将下一步标记为ant-steps-next-errornzStartIndex自定义起始序号默认 0用于非从 1 开始的流程编号nzTypenavigation导航型步骤条default/navigation注意导航型主要面向水平场景设计(nzIndexChange)监听步骤点击事件需要nz-step可点击且当前步骤之外才触发返回被点击步骤的索引。这些能力在组件宿主 class 绑定steps.component.ts 的host定义中均有对应ant-steps-vertical、ant-steps-small、ant-steps-dot、ant-steps-navigation、ant-steps-with-progress等。六、测试验证方向切换与结构断言仓库的单元测试 steps.spec.ts 对方向切换行为给出了可验证的断言。例如「outer steps」测试组中将direction置为vertical后断言宿主 classtestComponent.direction vertical; testComponent.cdr.markForCheck(); fixture.detectChanges(); expect(outStep.nativeElement.className).toBe(ant-steps ant-steps-vertical);测试中还验证了默认水平模式下 class 为ant-steps ant-steps-horizontal ant-steps-label-horizontal步骤状态随nzCurrent变化而切换finish/processactive/wait除最后一个步骤外每个步骤都存在.ant-steps-item-tail连接线元素第 3 步无 tail。这些断言与竖直方向 Demo 的展示逻辑相互印证可作为回归验证的依据。七、完整 API 参考源自官方文档以下 API 表摘自 index.zh-CN.md是使用竖直步骤条及整个 Steps 组件时的权威参考。nz-steps整体步骤条参数说明类型默认值[nzType]步骤条类型default和navigation两种default \| navigationdefault[nzCurrent]指定当前步骤从 0 开始计数子nz-step可用nzStatus覆盖状态number0[nzDirection]步骤条方向水平horizontal与竖直verticalvertical \| horizontalhorizontal[nzLabelPlacement]标签放置位置默认水平放图标右侧可选vertical放图标下方vertical \| horizontalhorizontal[nzProgressDot]点状步骤条可设置为 TemplateRefboolean \| TemplateRef{ $implicit: TemplateRefvoid, status: string, index: number }false[nzSize]大小普通default和迷你smallsmall \| defaultdefault[nzStatus]当前步骤的状态waitprocessfinisherrorwait \| process \| finish \| errorprocess[nzStartIndex]起始位置的序号number0(nzIndexChange)点击单个步骤时触发的事件number-nz-step单个步骤参数说明类型默认值[nzDescription]步骤的详情描述可选string \| TemplateRefvoid-[nzIcon]步骤图标类型可选string \| string[] \| Setstring \| { [klass: string]: any; } \| TemplateRefvoid-[nzStatus]指定状态不配置时使用nz-steps的nzCurrent自动指定wait \| process \| finish \| errorwait[nzTitle]标题string \| TemplateRefvoid-[nzSubtitle]子标题string \| TemplateRefvoid-[nzDisabled]禁用点击booleanfalse[nzPercentage]当前状态为process的步骤所显示的进度条进度只对基本类型nz-steps生效number-八、小结竖直方向步骤条在 ng-zorro-antd 中是一个「一个属性 一套样式」的完整能力nzDirectionvertical驱动宿主 class 切换vertical.less 提供纵向 flex 布局与竖线 tail 渲染step.component.ts 负责状态自动推导与内容渲染而 steps.spec.ts 则保证方向切换、tail 展示等行为持续正确。参考 vertical.ts 的完整示例即可在业务中快速落地流程向导、多步表单等场景。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐antd-mobile Steps 步骤条组件详解状态推导、方向布局与样式定制antd mobile Steps 步骤条组件详解状态推导、方向布局与样式定制 Steps 步骤条是 antd mobile 中用于「引导用户按流程完成多步骤UI组件前端移动开发Ant Design Steps 竖直方向步骤条从垂直布局到响应式适配的完整实践Ant Design Steps 竖直方向步骤条从垂直布局到响应式适配的完整实践 导读 本篇文章以 Ant DesignantdSteps 步骤条组件中「前端UI组件设计系统Ant Design 竖直步骤条Steps directionvertical实战指南从 Demo 到源码与样式原理Ant Design 竖直步骤条Steps directionvertical实战指南从 Demo 到源码与样式原理 竖直方向的步骤条是 Ant DUI组件前端设计系统上一篇QEMU SPDM 支持实战指南搭建 SPDM Responder 并为 NVMe 设备启用安全协议与数据模型SPDM认证下一篇SciPy 0.17.0 版本解析约束最小二乘、cKDTree 重写与统计模块全面增强创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
