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

在垫式垂直步进器中,我有4个垫式步进.第一步完成后,如何打勾？

我试过了：

  <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”,则它会打勾,并且因为我将其设置为“ false”而无法编辑.
只完成了=“ true”,我根本没有任何刻度.

需要帮助：

>垫子步骤完成后如何打勾
>取得勾号后,勾号应为绿色(为此必须添加CSS)

解决方法:

更新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 =“ done”表示您的刻度线.

似乎还没有通过API更改颜色的选项.解决方法是,可以使用以下方法：

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

标签：angular,angular-material,angular-material-stepper,javascript
来源： https://codeday.me/bug/20191025/1928652.html