Angular 材料步進：僅顯示步進頭中的當前和下一步

Question

我在水平方向和線性模式下使用Angular 材料步進器 (v13.xx)。

默認情況下，stepper-header 顯示所有可用的步驟。 但是我希望它只顯示活動步驟、之前的步驟和之后的步驟。 （當我觸發stepper.next()或stepper.previous()時會發生這種轉變）。

以 2 作為活動步的當前情況：

以 2 作為活動步驟的通緝情況：

重要的是，所有 5 個步驟都保持原樣工作。 我如何實現這一目標？

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

現在的樣子。