是否有更改-2\f25 material-2 \f25 stepper 2\f6中已完成步骤的图标的选项

Question

当前已完成步骤的图标是“创建”。如何将其更改为其他材料图标行，如“完成”？

<mat-vertical-stepper>
    <mat-step label="Agreement Preparation">
        <p>Agreement preparion is intiated by our side </p>
    </mat-step>
    <mat-step label="Ready for Biometric">
        <p>Agreement preparion is intiated by our side </p>

    </mat-step>
    <mat-step label="Document in Submission">
        <p>Agreement preparion is intiated by our side </p>

    </mat-step>
</mat-vertical-stepper>

Answer 1

材质库的当前版本支持此功能。(5.2.3+)

只需包含一个定义自定义图标的ng-template，并指明要替换的原始图标(“编辑”或“完成”)。格式如下所示：

<ng-template matStepperIcon="edit">
  <mat-icon>face</mat-icon>
</ng-template>

在这里，我已经将“编辑”图标替换为“面”的材质图标。(这是我用于测试目的的一个非常独特的图标。)

此ng-template放在mat-vertical-stepper或mat-horizontal-stepper内部。

因此，对于您的示例，如果您想要将'edit‘图标替换为'done’的材质图标，您可以这样做：

<mat-vertical-stepper>
    <ng-template matStepperIcon="edit">
      <mat-icon>done</mat-icon>
    </ng-template>

    <mat-step label="Agreement Preparation">
        <p>Agreement prepariaton is initiated by our side </p>
    </mat-step>
    <mat-step label="Ready for Biometrics">
        <p>Agreement preparation is initiated by our side </p>
    </mat-step>
    <mat-step label="Document in Submission">
        <p>Agreement preparion is intiated by our side </p>    
    </mat-step>
</mat-vertical-stepper>

Here是一个StackBlitz示例，它在实践中展示了这一点。

Answer 2

MatStep具有可编辑属性，该属性阻止步骤并将勾选图标“完成”设置为步骤标题。一旦该步骤完成，就运行下面这行：

this.stepper.selected.editable = false;

我不知道如何将表单解锁后将一个步骤设置为done，但表明该步骤已完成/完成并将其锁定是有意义的。您可以再次使用editable = true、.next()或.previous()函数解锁它。