Mat step show all steps

问题

I was reading about mat-steps and wondering if it's possible to show all mat steps on the window.By default you have to click on the icon and then the corresponding steps appear.I want that all the steps are visible.Is it possible?Thanks in advance for the help.

回答1:

For vertical stepper, just add the following in your css file:

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

回答2:

By default you have to click on the icon and then the corresponding steps appear.I want that all the steps are visible.Is it possible?

If my understanding is correct you mean't steps are activated on click, but you want all of them enabled by default, if so !

CHECK WORKING STACKBLITZ

just set [completed]="true"

Your component.html can be something like this:~

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step label="Step 1" [completed]="completed">
      <div class="page"></div>
  </mat-step>
  <mat-step label="Step 2" [completed]="completed">
      <div class="page"></div>
  </mat-step>
  <mat-step label="Step 3" [completed]="completed">
      <div class="page"></div>
  </mat-step>
</mat-horizontal-stepper>

Your component.ts like below:~

import { Component } from '@angular/core';
import { MatStepper } from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  completed = true;
}

来源：https://stackoverflow.com/questions/55936566/mat-step-show-all-steps