Angular Material Stepper对我来说有以下问题,这些问题在文档中找不到解决方法。
- 如何显示任何字符串或HTML而不是步骤索引号?
- 如何在鼠标悬停在任何mat步骤上时显示matToolTip?
我正在使用最新版本的Material Angular IO。
Angular Material Stepper对我来说有以下问题,这些问题在文档中找不到解决方法。
我正在使用最新版本的Material Angular IO。
很遗憾,目前使用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;
}
<ng-template matStepLabel>
<span matTooltip="Fill out your name">Fill out your name</span>
</ng-template>
我无法让上面选择的答案起作用,但对于图标,我确实成功地使用了另一个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