Угловой шаговый: возможно ли скрыть вертикальную линию для активного шага?

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