CSS для завершенного шага мата в mat-vertical-stepper

Question

В mat-vertical-stepper У меня 4 mat-step, Как я могу поставить галочку после завершения 1-го шага?

Я старался:

  <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" Я вообще не получаю никаких отметок.

нужна помощь для:

1. как поставить галочку после завершения шага по мату
2. после получения отметки отметка должна быть зеленой (для этого нужно добавить CSS)

Answer 1

Обновление 05/18 (иконки)

Согласно документам, значки теперь могут быть настроены следующим образом:

<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 будет иметь приоритет.

Итак, если вы хотите использовать заполненный атрибут, вам нужно удалить свой stepControl,

Если вы хотите изменить значок, возможно, вам придется подождать, пока этот коммит не будет объединен. Также обратите внимание на директиву 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>

Для изменения цветов и других настроек, пожалуйста, проверьте /questions/35444951/kak-izmenit-tsvet-uglovogo-materiala-shagovogo-shaga-ikonki/58823004#58823004