将步骤编号更改为 Angular Material Stepper 中的垫子图标 [英] Change step number to a mat-icon in an Angular Material Stepper

问题描述

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

解决方案

您可以使用 matStepperIcon 覆盖图标.

<mat-step label="Step 1" state="减号"><p>减号</p><div><button mat-button matStepperNext>Next</button>

</mat-step><mat-step label="Step 2" state="plus"><p>Plus</p><div><button mat-button matStepperNext>Next</button>

</mat-step><ng-template matStepperIcon="minus"><mat-icon>remove</mat-icon></ng-模板><ng-template matStepperIcon="plus"><mat-icon>add</mat-icon></ng-模板></mat-h​​orizo​​ntal-stepper>

添加到组件:

提供者:[{提供:STEPPER_GLOBAL_OPTIONS，useValue:{displayDefaultIndicatorType:false}}]

I want to create an Angular Material stepper, but instead of a number inside the bubble I want to use mat-icons, how should I do this?

解决方案

You can use matStepperIcon to override the icon.

<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>

Add to the component:

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

这篇关于将步骤编号更改为 Angular Material Stepper 中的垫子图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！