在Angular Material Stepper中将步骤号更改为Mat-icon [英] Change step number to a mat-icon in an Angular Material Stepper
本文介绍了在Angular Material Stepper中将步骤号更改为Mat-icon的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个Angular Material步进器,但是我不想使用气泡图标来代替气泡内的数字,我该怎么做呢?
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?
推荐答案
您可以使用 matStepperIcon
覆盖图标.
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>
添加到组件:
providers: [{
provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
}]
这篇关于在Angular Material Stepper中将步骤号更改为Mat-icon的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文