如何将角材料步进器步骤编号更改为任何图标或文本? [英] 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. 当鼠标悬停在任何 mat 步骤时如何显示 matToolTip?

我使用的是最新版本的 Material Angular 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屋！