![](/img/trans.png)
[英]How to change state icon in Angular material stepper dynamically created component?
[英]How to change state icon in Angular Material stepper?
我正在使用 Angular Material 步进器。 使用 STEPPER_GLOBAL_OPTIONS,我可以像这样更改步骤的状态:
<mat-step [stepControl]="secondFormGroup" optional state="phone">
</mat-step>
但是,如何访问这些图标的列表? 或者,有没有办法使用我自己的?
默认情况下,步骤标题将使用通过元素设置的材料设计图标中的创建和完成图标。 如果您想提供一组不同的图标,您可以通过为要覆盖的每个图标放置一个 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
参考这个例子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>
还有一点要注意,它不仅限于材质图标。 您也可以使用自定义图标。
我没有在我的项目中使用材质图标,也不想仅为步进器明确导入它们。 所以我最终在我的项目中使用了很棒的字体:
<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 -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.