如何将Angular Material Stepper步骤数字更改为任何图标或文本？

Question

Angular Material Stepper对我来说有以下问题，这些问题在文档中找不到解决方法。

1. 如何显示任何字符串或HTML而不是步骤索引号？
2. 如何在鼠标悬停在任何mat步骤上时显示matToolTip？

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

- Afsun Khammadli

Answer 1

很遗憾，目前使用material原生hooks无法覆盖该数字。一种可能的解决方案是使用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;
}

- Teddy Sterne

---

非常感谢您。 - Afsun Khammadli

@TeddySterne，你能否也回答一下这个问题https://stackoverflow.com/questions/53394497/mat-stepper-change-specific-steps-to-just-dots？ - Tzvi Gregory Kaidanov

好主意，没有其他方法。要仅显示每个状态的索引（作为整数），您可以使用以下代码：@ViewChild('stepper') stepper: MatHorizontalStepper;this.stepper._getIndicatorType = () => 'number'; - Mostafa Farhani

Answer 2

我认为这对你来说可能是有用的。

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

- Mohammadreza Imani

Answer 3

为了回答你问题的第二部分，你可以通过将<ng-template matStepLabel>的内容用带有matTooltip属性的div包裹来轻松地显示提示。这个演示展示了一个例子。

- bugs

---

谢谢您的回答。我在演示中没有找到解决方案或任何建议。 - Afsun Khammadli

抱歉，我忘记分叉代码片段了，现在你应该能够看到工具提示了。 - bugs

我想在鼠标悬停在索引而非标签上时显示工具提示 :) - Afsun Khammadli

Answer 4

我无法让上面选择的答案起作用，但对于图标，我确实成功地使用了另一个SO答案。我没有测试文本，只有图标。

将Angular Material Stepper中的步骤编号更改为mat-icon

尽管对我来说，答案还需要我弄清楚如何导入所提供的内容（答案中未包含）。

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

我在 Stackblitz 上也找到了一个不错的演示：

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

- Aiden Dipple