首页 文章

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

提问于
浏览 次
3

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

  • 如何显示任何字符串或html而不是步进索引号？

  • 当鼠标悬停在任何垫步时，如何显示matToolTip？

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

angular angular-material

2 回答

  • 3

    不幸的是，现在不可能使用来自材料的本机钩子来覆盖该数字 . 一种可能的解决方案是使用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;
}
    回复于
  • 1

    要回答问题的第二部分，可以通过将 <ng-template matStepLabel> 的内容包装到带有 matTooltip 属性的 div 中来轻松显示工具提示 . 这个demo显示了一个例子 .

    回复于

相关问题