更新05/18（图标）

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"，则会给出一个刻度线，并且在我制作"false"时无法进行编辑。只有completed="true"我根本没有得到任何刻度线。

需要帮助：

如果在完成垫步骤后如何给出勾选
获得刻度标记后，刻度标记应为绿色（必须添加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中，它说：

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

因此，如果您想使用已完成的属性，则需要删除stepControl。

如果要更改图标，可能需要等待合并此commit。另外，看看MatStepHeader指令。它有一个icon输入属性，你可以设置;例如icon="done"代表你的刻度线。

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

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

Answer 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://stackoverflow.com/a/66428028/4184651

在mat-vertical-stepper

2 个答案:

更新05/18（图标）

原帖