Angular Material 7 – Stepper
Angular指令 <mat-stepper>
用于创建向导式的工作流步骤。
在本章中,我们将展示使用Angular Material绘制步骤控件所需的配置。
创建Angular应用程序
按照以下步骤更新我们在 Angular 6 – 项目设置 章节中创建的Angular应用程序:
步骤 | 描述 |
---|---|
1 | 创建一个名为 materialApp 的项目,方式见 Angular 6 – 项目设置 章节。 |
2 | 修改 app.module.ts 、 app.component.ts 、 app.component.css 和 app.component.html ,具体如下。保持其余文件不变。 |
3 | 编译并运行该应用程序,以验证实现的逻辑的结果。 |
下面是修改后的模块描述符 app.module.ts 的内容。
下面是修改后的HTML主机文件 app.component.html 的内容。
下面是修改后的TS文件 app.component.ts 的内容。
结果
验证结果。
详情
- 首先,我们使用mat-stepper创建了步进器。
- 然后,我们使用mat-step添加了内容。