如何在angular mat-stepper中显示默认图标而不是“完成”图标

在Angular Material的mat-stepper组件中，默认情况下，每个步骤的底部会显示一个图标，这个图标会在步骤完成时变为“完成”图标。如果你想在某个步骤中始终显示默认图标而不是“完成”图标，可以通过以下几种方法实现：

方法一：使用`matStepperIconContext`指令

Angular Material提供了一个matStepperIconContext指令，可以用来覆盖默认的图标行为。你可以在特定的步骤上使用这个指令来指定一个不同的图标。

<mat-horizontal-stepper #stepper>
  <mat-step [completed]="true">
    <ng-template matStepLabel>Step 1</ng-template>
    Content for step 1
  </mat-step>
  <mat-step [completed]="false" matStepperIconContext="custom-icon">
    <ng-template matStepLabel>Step 2</ng-template>
    Content for step 2
  </mat-step>
</mat-horizontal-stepper>

然后，在你的样式文件中定义custom-icon类：

.custom-icon::after {
  content: '❓'; /* 使用你想要的图标 */
}

方法二：自定义图标组件

你可以创建一个自定义的图标组件，并在mat-step中使用它。

import { Component } from '@angular/core';
import { MatStepIcon } from '@angular/material/stepper';

@Component({
  selector: 'app-custom-step-icon',
  template: `<mat-icon>{{ icon }}</mat-icon>`,
  styleUrls: ['./custom-step-icon.component.css']
})
export class CustomStepIconComponent extends MatStepIcon {
  icon = 'help_outline'; // 使用你想要的图标名称
}

然后在你的mat-step中使用这个自定义图标组件：

<mat-horizontal-stepper #stepper>
  <mat-step [completed]="true">
    <ng-template matStepLabel>Step 1</ng-template>
    Content for step 1
  </mat-step>
  <mat-step [completed]="false">
    <ng-template matStepLabel>Step 2</ng-template>
    Content for step 2
    <div class="step-icons">
      <app-custom-step-icon></app-custom-step-icon>
    </div>
  </mat-step>
</mat-horizontal-stepper>

方法三：使用CSS覆盖默认图标

你也可以通过CSS来覆盖默认的图标样式。

.mat-step-header .mat-step-label.mat-step-completed .mat-step-icon {
  background-image: none !important;
  content: '❓'; /* 使用你想要的图标 */
}

应用场景

这种方法适用于以下场景：

当你希望在某些步骤中始终显示默认图标，而不是“完成”图标时。
当你需要自定义步骤图标的样式时。

参考链接

Angular Material Stepper Documentation

通过以上方法，你可以在Angular Material的mat-stepper组件中显示默认图标而不是“完成”图标。选择适合你项目需求的方法进行实现即可。

如何在angular mat-stepper中显示默认图标而不是“完成”图标

方法一：使用matStepperIconContext指令

方法二：自定义图标组件

方法三：使用CSS覆盖默认图标

应用场景

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法一：使用`matStepperIconContext`指令