Как изменить значок состояния в угловом материале? - PullRequest
Новая
       36

Как изменить значок состояния в угловом материале?

0 голосов
/ 04 июля 2019

Я использую угловой материал. Используя STEPPER_GLOBAL_OPTIONS, я могу изменить состояние шагов следующим образом: 

  <mat-step [stepControl]="secondFormGroup" optional state="phone">
  </mat-step>

Однако как мне получить доступ к списку этих значков? Или есть какой-нибудь способ использовать мой собственный?

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

По умолчанию заголовки шагов будут использовать значки «Создать» и «Готово» из значка «Дизайн материала», заданного с помощью элементов. Если вы хотите предоставить другой набор значков, вы можете сделать это, поместив matStepperIcon для каждого из значков, которые вы хотите переопределить. Индексные, активные и необязательные значения отдельных шагов доступны через переменные шаблона: 

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>insert_drive_file</mat-icon>
  </ng-template>

  <ng-template matStepperIcon="done">
    <mat-icon>done_all</mat-icon>
  </ng-template>

  <!-- Custom icon with a context variable. -->
  <ng-template matStepperIcon="number" let-index="index">
    {{index + 10}}
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

Обратите внимание, что вы не ограничены использованием компонента mat-icon при предоставлении пользовательских значков.

https://material.angular.io/components/stepper/overview#overriding-icons

0 голосов
/ 04 июля 2019

См. Этот пример угловой материал-шагового пример 

<!-- changed step icons -->
    <ng-template matStepperIcon="home">
        <mat-icon>home</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="form">
        <mat-icon>format_align_center</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="last">
        <mat-icon>done_all</mat-icon>
    </ng-template>

    <mat-step label="First Step" state="home">
        <div>
            <button mat-button matStepperNext>Continue</button>
    </div>
    </mat-step>

  <mat-step label="Fill out your address" state="form">
    <form [formGroup]="formGroup">
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step label="Done" state="last">
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>
...