Angular Material Stepper Component的StepState是什么？

Question

我試圖自定義step-numbers等1 ， 2 ， 3示出了用於在具有不同的圖標的每個步驟initial state步進的

我現在能夠通過在ng-template使用edit狀態的matStepperIcon值替換step-numbers ，如下所示

有了這個，我看到只有當我們進入下一步時，前一步驟step-number才會更改為icon （ donut_large ）。

  <mat-vertical-stepper [linear]="isLinear" #stepper>
        <ng-template matStepperIcon="edit"><mat-icon>donut_large</mat-icon> </ng-template>
    <mat-step >

...為簡潔而排除的代碼......

1）我是否需要將donut_large圖標與除編輯之外的其他matStepperIcon值一起使用。 所以看到donut_large圖標也顯示在Steppers reset狀態的步驟中。 2）可以使用所有其他StepState值，因為當我嘗試使用matStepperIcon任何其他值（如done或reset ，它不起作用。 它僅在我將值用作edit時才有效。 根據角度材料網站matStepperIcon引用的文檔

@Input('matStepperIcon') | name: StepState | Name of the icon to be overridden.

Answer 1

以下是Angular Material中的StepState（更准確地說是CDK中的）（來自源代碼 ）：

/** The state of each step. */
export type StepState = 'number' | 'edit' | 'done' | 'error' | string;

/** Enum to represent the different states of the steps. */
export const STEP_STATE = {
  NUMBER: 'number',
  EDIT: 'edit',
  DONE: 'done',
  ERROR: 'error'
};

這是一個示例代碼：

<mat-vertical-stepper #stepper>

  <ng-template matStepperIcon="edit">
    <mat-icon>fingerprint</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="done">
    <mat-icon>done</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="number">
    <mat-icon>code</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="error">
    <mat-icon>highlight_off</mat-icon>
  </ng-template>

  <mat-step>
    <ng-template matStepLabel>Step 1 label</ng-template>
    <p>Step 1</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 2 label</ng-template>
    <p>Step 2</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 3 label</ng-template>
    Step 3
  </mat-step>

</mat-vertical-stepper>

您還可以創建自己的步驟，查看文檔或StackBlitz的示例 。