javascript - 在 mat-vertical-stepper 中完成 mat-step 的 CSS

Question

在 mat-vertical-stepper 中，我有 4 个 mat-step。第一步完成后如何打勾？

我试过:

  <mat-vertical-stepper style="background:#f2ecec;" #stepper  [linear]="true">
    <mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true">
       <h3> Name </h3>
    </mat-step>
  </mat-vertical-stepper>

如果我将 editable="false" 设置为 editable="false"，它会给出一个勾号并且无法编辑，因为我将其设置为 "false"。 只有 completed="true" 我根本没有得到任何刻度线。

需要帮助:

1. 垫步完成后如何打勾
2. 获取刻度线后，刻度线应该是绿色的(需要添加CSS)

Answer 1

05/18 更新(图标)

根据docs ，现在可以像这样自定义图标:

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

  <ng-template matStepperIcon="done">
    <custom-icon>done</custom-icon>
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

原帖

在官方docs ，它说:

Note that if both completed and stepControl are set, the stepControl will take precedence.

所以，如果你想使用 completed 属性，你需要删除你的 stepControl。

如果你想改变图标，你可能需要等待这个 commit被合并。另外，看看 MatStepHeader指示。它有一个你可以设置的icon输入属性；例如icon="done" 为您的刻度线。

似乎还没有通过 API 更改颜色的选项。作为解决方法，您可以使用类似的方法:

/deep/ .mat-step-header .mat-step-icon {
  background-color: red;
}