Angular Stepper：是否可以隐藏Active Step的垂直线？

Question

是否可以在步进器中隐藏活动步的垂直线？

我想将表单内容向左移动以在手机上拥有更多的工作空间。但是我找不到仅针对活动步骤隐藏垂直线的解决方案。

任何帮助将不胜感激。

谢谢。

这是上述场景的示例闪电战。

https://stackblitz.com/angular/mdvpkdeqqry?file=app%2Fstepper-vertical-example.ts

Answer 1

经过几次尝试，我发现了一种仅针对活动步骤隐藏垂直线的方法

如果您只想为活动的人隐藏它，可以使用此

mat-step-header[aria-selected=true] ~ .mat-stepper-vertical-line::before {
  border-left-width: 0;
}

此符号~用于标记他们是兄弟姐妹。

如果要将其隐藏为所有步骤，则可以使用此

.mat-stepper-vertical-line::before {
  border-left-width: 0;
}

要执行此操作，您需要在styles.css文件夹的src中定义这些类