Question

我正在使用Angular Material步进器。使用STEPPER_GLOBAL_OPTIONS，我可以更改以下步骤的状态：

  <mat-step [stepControl]="secondFormGroup" optional state="phone">
  </mat-step>

但是，如何访问这些图标的列表？或者，有什么方法可以使用我自己的？

Answer 1

请参考此示例 angular-material-stepper-example

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

    <mat-step label="First Step" state="home">
        <div>
            <button mat-button matStepperNext>Continue</button>
    </div>
    </mat-step>

  <mat-step label="Fill out your address" state="form">
    <form [formGroup]="formGroup">
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step label="Done" state="last">
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>

Answer 2

默认情况下，步骤标题将使用通过元素设置的“材料设计”图标集中的创建和完成图标。如果要提供不同的图标集，可以通过为要覆盖的每个图标放置一个matStepperIcon来实现。可通过模板变量获得各个步骤的索引，有效值和可选值：

ImportError: No module named pywinauto.application

请注意，提供自定义图标时，您不仅限于使用mat-icon组件。

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

Answer 3

另外一点要注意，它不仅限于材质图标。您也可以使用自定义图标。

我没有在我的项目中使用材质图标，也不想仅为步进器明确导入它们。所以我最终在我的项目中使用了很棒的字体：

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <i class="fa fa-check-circle"></i>
    </ng-template>
    <ng-template matStepperIcon="active">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="done">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="number">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
</mat-horizontal-stepper>
<!-- END - Material Stepper  -->

如何在Angular Material步进器中更改状态图标？

3 个答案: