如何让Angular Material垂直mat-stepper从下到上排列？

可以通过CSS实现垂直步骤的倒序排列，完全适配动态添加的场景，不需要硬编码步骤顺序。以下是具体实现：

1. 给垂直Stepper添加自定义类 #

在HTML中给mat-vertical-stepper指定一个自定义类，避免影响其他Stepper组件：

<mat-vertical-stepper class="reverse-vertical-stepper" [linear]="false">
  <mat-step *ngFor="let step of steps" [label]="step.label">
    {{ step.content }}
  </mat-step>
</mat-vertical-stepper>

2. 编写CSS实现倒序与样式修正 #

通过Flex布局反转步骤列表，并调整默认的连接线样式，确保视觉连贯：

/* 反转步骤列表的排列方向 */
.reverse-vertical-stepper .mat-step-list {
  display: flex;
  flex-direction: column-reverse;
}

/* 调整连接线的位置，适配倒序后的布局 */
.reverse-vertical-stepper .mat-vertical-stepper-line::before {
  top: auto;
  bottom: 0;
  height: calc(100% + 24px); /* 匹配默认步骤间距，保证线条连接完整 */
}

/* 修正首尾步骤的连接线显示 */
.reverse-vertical-stepper .mat-step:last-child:not(:first-child) .mat-vertical-stepper-line {
  display: none; /* 原最后一步（现在的顶部步骤）不需要顶部线条 */
}
.reverse-vertical-stepper .mat-step:first-child:not(:last-child) .mat-vertical-stepper-line {
  display: block; /* 原第一步（现在的底部步骤）需要底部线条 */
}

注意事项 #

• 动态添加步骤时，*ngFor仍按正常顺序（Step1→Step2→Step3）生成，CSS会自动反转显示顺序为Step3→Step2→Step1。
• 如果启用了linear模式，注意组件内部的步骤索引逻辑：显示的顶部步骤对应数组的最后一项，底部步骤对应数组的第一项，处理步骤切换时需注意索引对应关系。

内容的提问来源于stack exchange，提问作者Patrice