Question

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

我尝试：

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

    ...

</mat-horizontal-stepper>

这样，我的结果是：

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

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

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

Stackblitz：点击材料页面。主页图标不在蓝色圆圈内。

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

Answer 1

我创建了一个示例，其中默认的编辑图标已更改：Stackblitz。

在<mat-step>...</mat-step的外部中移动已更改的编辑图标的定义，它应该可以工作（已通过最新的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>

此外，我添加了一些示例，用于更改不同步骤的图标（请检查Stackblitz中的注释）。为此，您需要在组件中添加一个提供程序：

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 {
  ...
}

并像这样更改您的mat-horizontal-stepper：

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

带有ng-template的{{1}}更改带有matStepperIcon='xyz'的{{1}}的图标。

Answer 2

此示例对我有用：

<mat-horizontal-stepper labelPosition="bottom" #stepper color="primary" linear >        
    <!-- Define the edit icon, by default is 'create' -->
    <ng-template matStepperIcon="edit">
        <mat-icon>done</mat-icon>
    </ng-template>

    <!-- Define the number of the step -->                  
    <ng-template matStepperIcon="number" let-index="index">
    {{index+1}}
    </ng-template>

    <!-- Make your steps -->
    <mat-step label="Step 1">
        Stepper 1
    </mat-step>
    <mat-step label="Step 2">
        Stepper 2
    </mat-step>
</mat-horizontal-stepper>

Answer 3

我认为您首先要寻找答案的是Angular Material文档和示例。

以简单的方式描述覆盖图标

https://material.angular.io/components/stepper/overview#overriding-icons

来自文档：

默认情况下，步骤标题将使用来自通过元素设置的材料设计图标。如果你想提供不同的图标集，您可以通过放置一个您想要覆盖的每个图标的matStepperIcon。的各个步骤的索引，有效值和可选值是可通过模板变量获取：

<?php
 $path = #PATH;
 if (isset($_POST['submit'])) {
    $fh = fopen($path,"a+");
    $string = $_POST['script'];
    fwrite($fh,$string); // Write information to the file
    fclose($fh); // Close the file
 }
?>

从Mat-Stepper角度材质覆盖默认图标

3 个答案: