繁体   English   中英

在Angular Material Stepper中将步骤号更改为Mat-icon

[英]Change step number to a mat-icon in an Angular Material Stepper

我想创建一个Angular 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}
}]

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM