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

Posted 2023-05-07

【中文标题】在 mat-vertical-stepper 中完成 mat-step 的 CSS

【英文标题】：CSS for completed mat-step in mat-vertical-stepper

【发布时间】：2018-06-19 07:35:04

【问题描述】：

在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"，它会给出一个勾号，并且无法编辑，因为我创建了"false"。 只有completed="true" 我根本没有得到任何刻度线。

需要帮助：

垫步完成后如何打勾 得到刻度线后，刻度线应为绿色（必须添加CSS）

【参考方案1】：

2018 年 5 月更新（图标）

根据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中是这样写的：

请注意，如果同时设置了 completed 和 stepControl，则 stepControl 将优先。

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

如果您想更改图标，您可能需要等待此commit 被合并。另外，请查看MatStepHeader 指令。它有一个可以设置的icon 输入属性；例如icon="done" 你的勾号。

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

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

【讨论】：

请注意 /deep/ 和 ::ng-deep 目前都已弃用。 angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【参考方案2】：

只需替换图标集，而不是将步骤明确标记为已完成。

 <mat-horizontal-stepper>
        <!-- Icon overrides. -->
        <ng-template matStepperIcon="edit">
            <i class="fa fa-check-circle"></i>
        </ng-template>
        <ng-template matStepperIcon="done">
            <i class="fa fa-dot-circle-o"></i>
        </ng-template>
        <ng-template matStepperIcon="number">
            <i class="fa fa-dot-circle-o"></i>
        </ng-template>
    </mat-horizontal-stepper>

如需更改颜色和其他自定义，请查看https://***.com/a/66428028/4184651