如何更改 Angular Material 步进器中的状态图标?
Posted
技术标签:
【中文标题】如何更改 Angular Material 步进器中的状态图标?【英文标题】:How to change state icon in Angular Material stepper? 【发布时间】:2019-11-15 03:26:59 【问题描述】:我正在使用 Angular Material 步进器。使用 STEPPER_GLOBAL_OPTIONS,我可以像这样更改步骤的状态:
<mat-step [stepControl]="secondFormGroup" optional state="phone">
</mat-step>
但是,如何访问这些图标的列表?或者,有什么方法可以使用我自己的吗?
【问题讨论】:
【参考方案1】:默认情况下,步骤标题将使用 Material design 图标集中通过元素设置的创建和完成图标。如果您想提供一组不同的图标,您可以通过为每个要覆盖的图标放置一个 matStepperIcon 来实现。各个步骤的索引、活动和可选值可通过模板变量获得:
<mat-vertical-stepper>
<ng-template matStepperIcon="edit">
<mat-icon>insert_drive_file</mat-icon>
</ng-template>
<ng-template matStepperIcon="done">
<mat-icon>done_all</mat-icon>
</ng-template>
<!-- Custom icon with a context variable. -->
<ng-template matStepperIcon="number" let-index="index">
index + 10
</ng-template>
<!-- Stepper steps go here -->
</mat-vertical-stepper>
请注意,在提供自定义图标时,您不仅限于使用 mat-icon 组件。
https://material.angular.io/components/stepper/overview#overriding-icons
【讨论】:
【参考方案2】:参考这个例子 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>
【讨论】:
【参考方案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 步进器中的状态图标?的主要内容,如果未能解决你的问题,请参考以下文章
屏幕太小时,Angular Material 步进器标题消失
如何使用模板驱动形式将角度路由与角度材料步进器(https://material.angular.io/components/stepper/overview)结合起来?
如果步骤中有错误,如何更改 Material UI 步进器背景颜色
Angular Material:如何在 TS 中设置具有不同背景颜色的每个 mat-horizontal-stepper 步进器图标