时间戳

首页 > 解决方案 > Angular Material Stepper 组件的 StepState 是什么

angular - Angular Material Stepper 组件的 StepState 是什么

问题描述

我正在尝试自定义step-numbers类似1, 2,为每个步骤显示的步进器3中的不同图标initial state

我目前step-numbers可以通过使用下面的状态matStepperIcon值来替换editng-template

有了这个，我看到只有当我们进入下一步时，前面的步骤step-number才会更改为icon( donut_large)。

  <mat-vertical-stepper [linear]="isLinear" #stepper>
        <ng-template matStepperIcon="edit"><mat-icon>donut_large</mat-icon> </ng-template>
    <mat-step >

...为简洁起见排除了代码...

1）我是否需要使用donut_large具有其他matStepperIcon值的图标而不是 edit 。所以看到 donut_large 图标也显示在 Steppersreset状态的步骤上。2)StepState可以使用所有其他值，因为当我尝试使用任何其他值时，例如doneor reset，matStepperIcon它不起作用。它仅在我将值用作edit. 根据角度材料网站上的文档，matStepperIcon请参阅

@Input('matStepperIcon') | name: StepState | Name of the icon to be overridden.

标签： angularangular-materialangular-material2

解决方案

这是 Angular Material（更准确地说是 CDK）中的 StepState（来自源代码）：

/** The state of each step. */
export type StepState = 'number' | 'edit' | 'done' | 'error' | string;

/** Enum to represent the different states of the steps. */
export const STEP_STATE = {
  NUMBER: 'number',
  EDIT: 'edit',
  DONE: 'done',
  ERROR: 'error'
};

这是一个示例代码：

<mat-vertical-stepper #stepper>

  <ng-template matStepperIcon="edit">
    <mat-icon>fingerprint</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="done">
    <mat-icon>done</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="number">
    <mat-icon>code</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="error">
    <mat-icon>highlight_off</mat-icon>
  </ng-template>

  <mat-step>
    <ng-template matStepLabel>Step 1 label</ng-template>
    <p>Step 1</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 2 label</ng-template>
    <p>Step 2</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 3 label</ng-template>
    Step 3
  </mat-step>

</mat-vertical-stepper>

您还可以创建自己的步骤，查看文档或 StackBlitz 上的示例。

推荐阅读