仅使用 mat-stepper 进行显示

Question

我正在尝试显示一个“时间线”，我希望看起来像这样：

不，我有以下内容：

使用：

<mat-stepper orientation="vertical" >
<div *ngFor="let step of steps; let i = index;">
    <mat-step [completed]="false" [editable]="false" state="number">
        <ng-template matStepLabel>
            Step {{i}}
        </ng-template>
    </mat-step>
</div>

有没有办法仅将 mat-stepper 用于显示并阻止选择？

Answer 1

您可以使用自定义 CSS 和 mat-step 的一些配置来完成此操作

CSS 添加到全局样式

.custom-stepper {
  .mat-vertical-content-container .mat-vertical-stepper-content {
    display: none;
  }

  .mat-step-icon {
    background-color: var(
      --mat-stepper-header-selected-state-icon-background-color
    );
    color: var(--mat-stepper-header-selected-state-icon-foreground-color);
  }
}

html

<mat-stepper
  orientation="vertical"
  [linear]="isLinear"
  #stepper
  class="custom-stepper"
>
  <div *ngFor="let step of steps; let i = index;">
    <mat-step [completed]="false" [editable]="true" state="number">
      <ng-template matStepLabel> Step {{i}} </ng-template>
    </mat-step>
  </div>
</mat-stepper>

堆栈闪电战