使用 CdkStepper 自定义步进器 Custom stepper using the CdkStepper

用 CDK 步进器创建一个自定义步进器

Creating a custom stepper using the CDK stepper

CDK 步进器允许建立一个自定义的步进器，你可以完全使用自己的样式，不用任何 Material Design 特有的样式。

The CDK stepper allows to build a custom stepper which you can completely style yourself without any specific Material Design styling.

在本指南中，我们将学习如何使用 CDK 步进器构建自己的自定义步进器。以下是本指南会做出的成品：

In this guide, we'll learn how we can build our own custom stepper using the CDK stepper. Here is what we'll build by the end of this guide:

A custom CDK stepper without a form

Step 1/2

This is any content of "Step 1"

Create our custom stepper component

现在，我们准备创建自定义步进器组件。因此，我们需要创建一个扩展了 CdkStepper 的新 Angular 组件：

Now we are ready to create our custom stepper component. Therefore, we need to create a new Angular component which extends CdkStepper:

custom-stepper.component.ts

@Component({
  selector: "app-custom-stepper",
  templateUrl: "./custom-stepper.component.html",
  styleUrls: ["./custom-stepper.component.css"],
  // This custom stepper provides itself as CdkStepper so that it can be recognized
  // by other components.
  providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }]
})
export class CustomStepperComponent extends CdkStepper {
  onClick(index: number): void {
    this.selectedIndex = index;
  }
}

在从 CdkStepper 扩展出一个组件类之后，可以从这个类访问不同的属性，比如 linear、selectedIndex 和 steps。这些属性的定义位于这个 API 文档中。

After we've extended our component class from CdkStepper we can now access different properties from this class like linear, selectedIndex and steps which are defined in the API documentation.

这是我们自定义步进器组件的 HTML 模板：

This is the HTML template of our custom stepper component:

custom-stepper.component.html

<section class="container">
  <header><h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2></header>

  <div [style.display]="selected ? 'block' : 'none'">
    <!-- Content from the CdkStep is projected here -->
    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
  </div>

  <footer class="step-navigation-bar">
    <button class="nav-button" cdkStepperPrevious>&larr;</button>
    <button
      class="step"
      *ngFor="let step of steps; let i = index;"
      [ngClass]="{'active': selectedIndex === i}"
      (click)="onClick(i)"
    >
      Step {{i + 1}}
    </button>
    <button class="nav-button" cdkStepperNext>&rarr;</button>
  </footer>
</section>

在 app.component.css 文件中，我们可以为步进器添加所希望的样式了：

In the app.component.css file we can now style the stepper however we want:

custom-stepper.component.css

.example-container {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.example-step-navigation-bar {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.example-active {
  color: blue;
}

.example-step {
  background: transparent;
  border: 0;
  margin: 0 10px;
  padding: 10px;
  color: black;
}

.example-step.example-active {
  color: blue;
  border-bottom: 1px solid blue;
}

.example-nav-button {
  background: transparent;
  border: 0;
}

Using our new custom stepper component

现在，我们已准备好使用新的自定义步进器组件了，并且用一些步骤填充它。我们可以把它添加到 app.component.html 中，并定义一些步骤：

Now we are ready to use our new custom stepper component and fill it with steps. Therefore, we can, for example, add it to our app.component.html and define some steps:

app.component.html

<app-custom-stepper>
  <cdk-step><p>This is any content of "Step 1"</p></cdk-step>
  <cdk-step><p>This is any content of "Step 2"</p></cdk-step>
</app-custom-stepper>

如你所见，在这个例子中，各个步骤都需要包裹在一个 <cdk-step> 标记里。

As you can see in this example, each step needs to be wrapped inside a <cdk-step> tag.

你可以迭代这些步骤并使用这个自定义组件了，例子如下：

If you want to iterate over your steps and use your own custom component you can do it, for example, this way:

<app-custom-stepper>
  <cdk-step *ngFor="let step of mySteps; let stepIndex = index">
    <my-step-component [step]="step"></my-step-component>
  </cdk-step>
</app-custom-stepper>

Linear mode

上面的例子允许用户在所有步骤之间自由导航。此外，CdkStepper 还提供了线性模式，它可以要求用户在继续之前必须完成之前的步骤。

The above example allows the user to freely navigate between all steps. The CdkStepper additionally provides the linear mode which requires the user to complete previous steps before proceeding.

一个不涉及表单的简单例子是这样的：

A simple example without using forms could look this way:

app.component.html

<app-custom-stepper linear>
  <cdk-step editable="false" [completed]="completed">
    <input type="text" name="a" value="Cannot proceed to next step" />
    <button (click)="completeStep()">Complete step</button>
  </cdk-step>
  <cdk-step editable="false">
    <input type="text" name="b" value="b" />
  </cdk-step>
</app-custom-stepper>

app.component.ts

export class AppComponent {
  completed = false;

  completeStep(): void {
    this.completed = true;
  }
}
指南目录