企业官网建设流程全解析

• UI组件
• 前端

本文以 ng-zorro-antd（基于 Ant Design 的 Angular UI 组件库）Steps 组件的「竖直方向的步骤条（Vertical）」Demo 为切入点，完整讲解nzDirection="vertical"的用法、nz-steps/nz-step的核心 API、竖直方向的布局与连线样式实现，以及状态推导、尺寸变体等进阶主题。读完本文，你将能够在 Angular 项目中熟练搭建竖直步骤条，并理解其底层运行机制。

一、Demo 定位与完整示例

在仓库中，竖直方向步骤条的官方示例位于 vertical.md 与其配套的 vertical.ts。该 Demo 的定位信息如下：

• 顺序（order）：4，排在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" nzDirection="vertical"> <nz-step nzTitle="Finished" nzDescription="This is a description." /> <nz-step nzTitle="In Progress" nzDescription="This is a description." /> <nz-step nzTitle="Waiting" nzDescription="This is a description." /> </nz-steps> ` }) export class NzDemoStepsVerticalComponent {}

这段代码揭示了竖直步骤条的三个核心配置点：

1. nzDirection="vertical"：将整个步骤条切换为竖直方向，这是本文的主题；
2. [nzCurrent]="1"：指定当前步骤为第 2 步（从 0 开始计数），由此自动推导出三个步骤的状态分别为finish、process、wait；
3. nz-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 见下文第五节）：

Demo 中[nzCurrent]="1"的状态推导逻辑在NzStepComponent.currentIndex的 setter 中实现（step.component.ts）：

set 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。关键实现点如下：

1. 整体容器改为纵向 flex：

.@{steps-prefix-cls}-vertical { display: flex; flex-direction: column; }

2. 每个步骤项纵向排列、图标左浮、内容占满剩余宽度：图标通过float: inline-start与右侧内容并排，内容区min-height: 48px保证竖直方向的呼吸感；标题行高与图标尺寸对齐（line-height: @steps-icon-size），描述底部留白12px。

3. 步骤之间的连接竖线（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来驱动上述布局规则的。

五、进阶：竖直小型步骤条与更多组合用法

竖直方向同样支持nzSize="small"的迷你尺寸变体，官方示例见 vertical-small.ts：

<nz-steps [nzCurrent]="1" nzDirection="vertical" nzSize="small"> <nz-step nzTitle="Finished" nzDescription="This is a description." /> <nz-step nzTitle="In Progress" nzDescription="This is a description." /> <nz-step nzTitle="Waiting" nzDescription="This 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-error；
• nzStartIndex：自定义起始序号（默认 0），用于非从 1 开始的流程编号；
• nzType="navigation"：导航型步骤条（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'后断言宿主 class：

testComponent.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/process+active/wait）；除最后一个步骤外，每个步骤都存在.ant-steps-item-tail连接线元素（第 3 步无 tail）。这些断言与竖直方向 Demo 的展示逻辑相互印证，可作为回归验证的依据。

七、完整 API 参考（源自官方文档）

以下 API 表摘自 index.zh-CN.md，是使用竖直步骤条（及整个 Steps 组件）时的权威参考。

nz-steps（整体步骤条）

nz-step（单个步骤）

八、小结

竖直方向步骤条在 ng-zorro-antd 中是一个「一个属性 + 一套样式」的完整能力：nzDirection="vertical"驱动宿主 class 切换，vertical.less 提供纵向 flex 布局与竖线 tail 渲染，step.component.ts 负责状态自动推导与内容渲染，而 steps.spec.ts 则保证方向切换、tail 展示等行为持续正确。参考 vertical.ts 的完整示例，即可在业务中快速落地流程向导、多步表单等场景。

• UI组件
• 前端