角质物料步进移除数

Question

如何从角质物料步进器中移除这些数字？

我不想用图标代替他们，我希望有一个空的圆圈。

编辑:我使用的是角9

Answer 1

在mat步骤中，插入这些模板，从而替换默认的数字。

<mat-horizontal-stepper [linear]="true" #stepper>
  <!-- STEPS -->
  <mat-step label="First Step" state="your-state-name-here-1">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Second Step" state="your-state-name-here-2">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Third Step" state="your-state-name-here-3">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <!-- STEPS -->

  <!-- Replace icon mat-step -->
  <ng-template matStepperIcon="your-state-name-here-1">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-2">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-3">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <!-- Replace icon mat-step -->
</mat-horizontal-stepper>

Obs:为了使用自定义步骤状态，必须将displayDefaultIndicatorType选项添加到全局默认步骤选项中，该选项可以通过在应用程序的根模块或特定子模块中为STEPPER_GLOBAL_OPTIONS提供值来指定。

@NgModule({
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }
  ]
})

正式文件

Answer 2

不显示号码

::ng-deep .mat-step-icon-content { display: none !important; }

不要显示圆圈和数字

::ng-deep .mat-horizontal-stepper-header .mat-step-icon {
display: none !important;}