如何将角材料步进器步骤编号更改为任何图标或文本？

Question

Angular Material Stepper有以下问题，我无法从文档中找到。

1. 如何显示任何字符串或 html 而不是步进索引号？
2. 当鼠标悬停任何垫子步骤时如何显示matToolTip ？

我正在使用最新版本的Material Angular IO 。

Answer 1

不幸的是，现在不可能使用来自材料的原生钩子覆盖数字。 一种可能的解决方案是使用 css 覆盖该值。

在这里，我们隐藏当前符号并使用我们自己的文本/符号：

mat-step-header .mat-step-label {
    overflow: visible;
}

mat-step-header .mat-step-icon-not-touched span,
mat-step-header .mat-step-icon span,
mat-step-header .mat-step-icon-not-touched .mat-icon,
mat-step-header .mat-step-icon .mat-icon {
  display: none;
}

mat-step-header:nth-of-type(1) .mat-step-icon-not-touched:after,
mat-step-header:nth-of-type(1) .mat-step-icon:after {
  content: 'New 1';
}

.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon-not-touched::after,
.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon::after {
  content: 'add_circle' !important; /* name of the material icon */
  font-family: 'Material Icons' !important;
  font-feature-settings: 'liga' 1;
}

Answer 2

要回答问题的第二部分，您可以通过将<ng-template matStepLabel>的内容包装到具有matTooltip属性的div来轻松显示工具提示。 这个演示展示了一个例子。

Answer 3

我认为这可能对你有用。

<ng-template matStepLabel>
    <span matTooltip="Fill out your name">Fill out your name</span>
</ng-template>

Answer 4

我无法使上述选定的答案起作用，但是对于图标，我确实得到了其他 SO 答案以成功工作。 我没有测试文本，只有图标。

将步骤编号更改为 Angular Material Stepper 中的垫子图标

虽然我的答案还需要我练习如何导入所提供的内容（未包含在答案中）。

import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

我还在 Stackblitz 中找到了一个很好的演示：

https://stackblitz.com/angular/maxbjapeayr?file=app/stepper-states-example.ts