коврик степпер не должен разрушаться в неактивных состояниях

Question

Я использую mat stepper, по умолчанию он сворачивает все активные состояния, но я не хочу этого, я хочу отображать неактивные состояния и в расширенном режиме.

<mat-vertical-stepper #stepper [linear]="isLinear">
 <mat-step *ngFor="let currentUserInteraction of 
currentUserInteractions" [stepControl]="currentUserInteraction.key">
 <ng-template matStepLabel>
     {{currentUserInteraction.name}}
 </ng-template>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  </mat-step>
</mat-vertical-stepper>

currentUserInteractions = [
{name: 'first', key: 'firstStep'},
{name: 'second', key: 'secondStep'},
{name: 'third', key: 'thirdStep'},
{name: 'fourth', key: 'fourthStep'},
];

Answer 1

Я думаю, что это поведение по умолчанию, чтобы свернуть завершенные / неактивные шаги и не должно быть изменено.

Если вы действительно хотите изменить это, вы можете попробовать переопределить CSS Angular Material по умолчанию с помощью чего-то вроде этого (добавьте это в styles.css):

.mat-vertical-stepper-content {
  visibility: visible !important;
  height: 100% !important;
}

Все выполнено / неактивнодля шагов height установлено значение 0px, а для visibility установлено значение hidden, приведенный выше CSS отменяет это для всех mat-step.Изменение этого параметра приводит к побочному эффекту, заключающемуся в том, что анимация Angular Material mat-step становится немного ломаной и немного нервной при нажатии на нее.Смотрите stackblitz здесь .