Angular Material Stepper：仅在 stepper-header 中显示当前和下一步答案

【问题标题】：Angular Material Stepper: show only current and next step in stepper-headerAngular Material Stepper：仅在 stepper-header 中显示当前和下一步
【发布时间】：2022-08-05 12:48:23
【问题描述】：

我在水平方向和线性模式下使用Angular Material Stepper(v13.x.x)。

默认情况下，stepper-header 显示所有可用的步骤。但是我希望它只显示活动步骤、之前的步骤和之后的步骤。（当我触发stepper.next() 或stepper.previous() 时会发生这种转变）。

以 2 作为活动步的当前情况：

以 2 作为活动步骤的通缉情况：

重要的是所有 5 个步骤都按原样工作。我如何实现这一目标？

标签： angular angular-material angular-material-stepper

【解决方案1】：

我在解决此问题时设法实现的最大目标是显示当前的和下一步.这是用于此的 CSS 代码：

::ng-deep {
  // Hide inactive steps and their lines
  .mat-step-header[aria-selected="false"],
  .mat-step-header[aria-selected="false"] + .mat-stepper-horizontal-line {
    visibility: collapse;
  }

  // Except for the next one
  .mat-step-header[aria-selected="true"] + .mat-stepper-horizontal-line + .mat-step-header {
    visibility: visible;
  }
}

How it looks now。

【讨论】：