如何将角材步进器的步号更改为任何图标或文本? [英] How to change angular material stepper step numbers to any icon or text?

问题描述

Angular Material Stepper 对我来说有以下问题，这些问题在文档中找不到.

Angular Material Stepper has following problems for me which I can not found from documentation.

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

1. How can I display any string or html instead of stepper index numbers?
2. How can display matToolTip when mouse hover any mat step?

我正在使用材料角度IO 的最新版本.

I am using latest version of Material Angular IO.

推荐答案

不幸的是，目前无法使用材质中的本机钩子覆盖数字.一种可能的解决方案是使用CSS覆盖值.

Unfortunately, right now it is impossible to override the number using native hooks from material. One possible solution is to use css to overwrite the value.

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

Here we hide the current symbol and use our own text/symbols:

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;
}

这篇关于如何将角材步进器的步号更改为任何图标或文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！