Question

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

如何显示任何字符串或html而不是步进索引号码？
当鼠标悬停在任何垫步时，如何显示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>的内容包装到div matTooltip属性中来轻松显示工具提示。这个demo显示了一个例子。

Answer 3

我认为这可能对您有用。

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

Answer 4

我无法获得上面选择的答案，但是对于图标，我确实得到了另一个答案，以便正常工作。我没有测试文字，只有图标。

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

尽管对我来说答案也需要我锻炼如何导入所提供的陈述（答案中未包含）。

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

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

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

如何将角度材料步进步骤数字更改为任何图标或文本？

4 个答案: