Question

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

```{r comment='', echo=FALSE, results='asis'}
 knitr::kable(mtcars[1:5,], caption = "A Knitr table.", floating.environment="sidewaystable")
```

Answer 1

当前版本的Material库支持此功能。（5.2.3 +）

只需添加一个定义自定义图标的ng-template，然后指明您要替换的原始图标（＆＃39;编辑＆＃39;或已完成＆＃39;）。格式如下：

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

在这里，我已经取代了＆＃39;编辑＆＃39;带有＆＃39; face＆＃39;的素材图标的图标。（这是我用于测试目的的一个非常独特的图标。）

此ng-template位于mat-vertical-stepper或mat-horizontal-stepper。

内

因此，对于您的示例，如果您想要替换＆＃39;编辑＆＃39;带有＆＃39; done＆＃39;的材料图标的图标，你会这样做：

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

如何设置一个步骤来解锁表单我不知道，但是有必要指出步骤已完成/完成并锁定它。您可以使用editable = true，.next（）或.previous（）函数再次解锁它。

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

2 个答案: