用于在 mat-vertical-stepper 中完成 mat-step 的 CSS [英] CSS for completed mat-step in mat-vertical-stepper

问题描述

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

In mat-vertical-stepper I have 4 mat-step. How can I have tick-mark once 1st step is completed?

我试过了:

  <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".只有 completed="true" 我根本没有得到任何刻度线.

If I make editable="false", it is giving a tick mark and can't be editable as I made it "false". Having only completed="true" I am not getting any tick mark at all.

需要帮助:

1. 如何在 mat-step 完成后打勾
2. 获取刻度线后，刻度线应为绿色(为此必须添加CSS)

推荐答案

更新 05/18(图标)

根据 docs，现在可以自定义图标，例如这个:

Update 05/18 (icons)

According to the docs, icons can now be customized like this:

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

原帖

在官方文档中，它说:

注意，如果completed和stepControl都设置了，stepControl将优先.

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

因此，如果您想使用completed 属性，您需要删除您的stepControl.

So, if you want to use the completed attribute you need to delete your stepControl.

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

If you want to change the icon, you might have to wait for this commit to be merged. Also, have a look at the MatStepHeader directive. It has an icon input property you can set; e.g. icon="done" for your tick mark.

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

There does not seem to be an option to change the color via the API, yet. As a workaround, you could use something like:

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

这篇关于用于在 mat-vertical-stepper 中完成 mat-step 的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！