Question

我在阅读关于垫子的步骤，想知道是否可以在窗口上显示所有垫子的步骤。默认情况下，您必须单击图标然后出现相应的步骤。我希望所有步骤都是可见的。可能吗？谢谢您的帮助。

Answer 1

对于垂直步进器，只需在css文件中添加以下内容：

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

Answer 2

默认情况下，您必须单击图标，然后单击相应的步骤出现。我希望所有步骤都可见。可以吗？

如果我的理解是正确的，则意味着单击时不会激活任何步骤，但是默认情况下您希望所有步骤都启用！

检查 WORKING STACKBLITZ

只需设置[completed]="true"

您的component.html可能是这样的：〜

<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>

您的component.ts如下所示：〜

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;
}

垫子步骤显示所有步骤

2 个答案: