覆盖 mat-stepper 角度材料的默认图标 [英] Override the default icon from mat-stepper angular material

问题描述

我正在尝试从步进器材料角度覆盖默认编辑图标，但这不起作用.

我尝试:

<垫步><表格><ng-template matStepperIcon="edit"><mat-icon>home</mat-icon></ng-模板>...</mat-h​​orizo​​ntal-stepper>

这样我的结果是:

当步进器处于活动/非活动状态时:

https://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png

我有什么特别的事情要做?

堆叠闪电战:点击材料页面.主页图标不在蓝色圆圈内.

https://stackblitz.com/edit/angular-material-design-wxawqh

解决方案

我创建了一个更改默认编辑图标的示例:Stackblitz.

将更改后的编辑图标的定义移动到 ... 的外部，它应该可以工作(测试最新的 Angular 7.0.2):

<!-- 更改默认的编辑"图标--><ng-template matStepperIcon="edit"><mat-icon>bubble_chart</mat-icon></ng-模板><mat-step label="Antes de começar..."><div><button mat-button matStepperNext>Continuar</button>

</mat-step>

此外，我添加了一些示例来更改不同步骤的图标(查看 Stackblitz 中的注释).为此，您需要向组件添加一个提供程序:

import { Component, OnInit } from '@angular/core';从'@angular/forms' 导入 { FormGroup, FormControl };从'@angular/cdk/stepper'导入{MAT_STEPPER_GLOBAL_OPTIONS}；@成分({选择器:'with-material-app'，templateUrl: './withmaterial.component.html',styleUrls: ['./withmaterial.component.css'],提供者:[{提供:MAT_STEPPER_GLOBAL_OPTIONS，useValue:{ displayDefaultIndicatorType:false }}]})导出类 WithMaterialComponent 实现 OnInit {...}

并像这样更改您的mat-h​​orizo​​ntal-stepper:

</mat-step>...</mat-h​​orizo​​ntal-stepper>

带有 matStepperIcon='xyz' 的 ng-template 使用 state="xyz> 更改了 mat-step 的图标".

I'm trying to override the default edit icon from stepper material angular but this don't work.

I try:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
   <mat-step>
      <form>
           <ng-template matStepperIcon="edit">
                <mat-icon>home</mat-icon>
           </ng-template>

    ...

</mat-horizontal-stepper>

In this way my result is:

When the stepper is active/inactive:

https://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png

There's something special that i have to do?

Stackblitz: Click in material page. the home icon is not inside the blue circle.

https://stackblitz.com/edit/angular-material-design-wxawqh

解决方案

I've created an example where the default edit icon is changed: Stackblitz.

Move your definition of the changed edit icon outside of the <mat-step>...</mat-step and it should work (tested with latest Angular 7.0.2):

<mat-horizontal-stepper [linear]="isLinear">

  <!-- change default 'edit' icon -->
  <ng-template matStepperIcon="edit">
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>

  <mat-step label="Antes de começar...">
    <div>
        <button mat-button matStepperNext>Continuar</button>
    </div>
  </mat-step>

In addition I added some examples for changing the icons of the different steps (check the comments in the Stackblitz). For this to work, you need to add a provider to your component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';

@Component({
  selector: 'with-material-app',
  templateUrl: './withmaterial.component.html',
  styleUrls: ['./withmaterial.component.css'],
  providers: [{
    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
  }]
})
export class WithMaterialComponent implements OnInit {
  ...
}

and change your mat-horizontal-stepper like this:

<mat-horizontal-stepper [linear]="isLinear">

    <!-- change default 'edit' icon -->
    <ng-template matStepperIcon="edit">
        <mat-icon>bubble_chart</mat-icon>
    </ng-template>

    <!-- changed step icons -->
    <ng-template matStepperIcon="home">
        <mat-icon>home</mat-icon>
    </ng-template>

    <mat-step label="Antes de começar..." state="home">
        <div>
            <button mat-button matStepperNext>Continuar</button>
        </div>
    </mat-step>

  ...

</mat-horizontal-stepper>

The ng-template with matStepperIcon='xyz' changes the icon of the mat-step with state="xyz".

这篇关于覆盖 mat-stepper 角度材料的默认图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！