时间戳

首页 > 解决方案 > 在 Angular Material Stepper 中将步骤编号更改为 mat-icon

angular - 在 Angular Material Stepper 中将步骤编号更改为 mat-icon

问题描述

我想创建一个 Angular Material 步进器，但我想使用 mat-icons 而不是气泡内的数字，我应该怎么做？

标签： angularangular-material

解决方案

您可以使用matStepperIcon来覆盖图标。

<mat-horizontal-stepper>
  <mat-step label="Step 1" state="minus">
    <p>Minus</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 2" state="plus">
    <p>Plus</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <ng-template matStepperIcon="minus">
    <mat-icon>remove</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="plus">
    <mat-icon>add</mat-icon>
  </ng-template>
</mat-horizontal-stepper>

添加到组件：

providers: [{
  provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
}]

推荐阅读