Question

我尝试自定义step-numbers，如1，2，3，每个步骤在步进器的initial state中用不同的图标显示

我现在可以通过在step-numbers中使用matStepperIcon状态的edit值来替换ng-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。因此请注意，在步进器reset状态下的步骤中也显示了donut_large图标。 2）可以使用所有其他StepState值，因为当我尝试对done使用reset或matStepperIcon之类的任何其他值时，它不起作用。仅当我将值用作edit时它才有效。根据角材料网站matStepperIcon上的文档是

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

Answer 1

（来自source code）是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上检出docs或example。

角材料步进器组件的步进状态是什么

1 个答案: