Angular MDBootstrap 步进器组件

Angular MDBootstrap 步进器组件是一个用于Angular应用程序的组件库，它提供了丰富的步进器组件，可以让开发人员快速轻松地实现带有表单的用户界面。该组件库集成了MDBootstrap，这是一个专为为Angular应用程序设计的一套经典样式和模板的UI框架，因此它可以为您的应用程序提供一致的外观和感觉。

特点

• 美观的外观样式和动画效果；
• 灵活配置和自定义选项；
• 实现表单填写的最佳组态；
• 集成MDBootstrap框架风格和特点。

安装

安装最新版本的Angular MDBootstrap 步进器组件：

npm install --save @angular-mdbootstrap/stepper

使用

1. 导入模块 StepperModule 到应用程序模块中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StepperModule } from '@angular-mdbootstrap/stepper';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StepperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在组件html文件中创建步进器组件。添加 <mdb-stepper> 标签。

<mdb-stepper [linear]="false" [filled]="true" [vertical]="false">
  <mdb-step [label]="'Step 1'" [editable]="true"  [completed]="false">
    <ng-template #step1>
      <h1>Step 1 content</h1>
      <p>Step 1 description</p>
    </ng-template>
  </mdb-step>
  <mdb-step [label]="'Step 2'" [editable]="true" [completed]="false">
    <ng-template #step2>
      <h1>Step 2 content</h1>
      <p>Step 2 description</p>
    </ng-template>
  </mdb-step>
  <mdb-step [label]="'Step 3'" [editable]="true" [completed]="false">
    <ng-template #step3>
      <h1>Step 3 content</h1>
      <p>Step 3 description</p>
    </ng-template>
  </mdb-step>
</mdb-stepper>

选项

linear

• 类型：boolean
• 默认值：false
• 描述：定义步进器是否必须按严格的顺序完成。

filled

• 类型：boolean
• 默认值：true
• 描述：定义步进器是否应该以填充模式呈现。（每一步的圆圈都呈现为一个填充的正方形）

vertical

• 类型：boolean
• 默认值：false
• 描述：定义步进器是否应该以纵向方式呈现。

mdb-step 组件属性

label

• 类型: string
• 描述: 步骤的标签。

completed

• 类型: boolean
• 默认值: false
• 描述: 步骤是否已完成。

editable

• 类型: boolean
• 默认值: true
• 描述: 步骤是否可以编辑。

结论

Angular MDBootstrap 步进器组件是一个易于使用，美观的库，可帮助开发人员开发具有表单填充的用户界面。它使用最新的Angular技术和MDBootstrap UI框架，并提供了灵活的配置选项，以使每个开发人员能够创建自己的个性化步进器组件。如果你正在构建一个富有表单的应用程序，那么Angular MDBootstrap 步进器组件是一个强大和便捷的工具，可以让你迅速地提高应用程序的质量和可用性。