angular可自定义的步进器/向导组件 - ng-wizard

angular可自定义的步进器/向导组件 - ng-wizard
插件名称 ng-wizard
发布时间 2020年11月2日
插件作者 abdulkadirgenc

用于Angular驱动的应用程序的可自定义的主题化步进器和向导组件。

如何使用它:

1.安装软件包。

# NPM
$ npm i ng-wizard

2.导入组件。

import { NgModule } from '@angular/core';
import { NgWizardModule, NgWizardConfig, THEME } from 'ng-wizard';
const ngWizardConfig: NgWizardConfig = {
  theme: THEME.default
};
@NgModule({
  imports: [
    NgWizardModule.forRoot(ngWizardConfig)
  ]
})
export class AppModule { }

3.导入必要的CSS文件和可选主题。

/* Core */
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~ng-wizard/themes/ng_wizard.min.css';

/* Themes */
@import '~ng-wizard/themes/ng_wizard_theme_arrows.min.css';
@import '~ng-wizard/themes/ng_wizard_theme_circles.min.css';
@import '~ng-wizard/themes/ng_wizard_theme_dots.min.css';

4.将步骤添加到向导组件。

<ng-wizard [config]="config" (stepChanged)="stepChanged($event)">
  <ng-wizard-step [title]="'Step 1'" [description]="'Step 1 description'"
    [canEnter]="isValidTypeBoolean" [canExit]="isValidFunctionReturnsBoolean.bind(this)">
    <span>Step 1 content</span>
  </ng-wizard-step>
  <ng-wizard-step [title]="'Step 2'" [description]="'Step 2 description'" [state]="stepStates.disabled">
    <span>Step 2 content</span>
  </ng-wizard-step>
  <ng-wizard-step [title]="'Step 3'" [description]="'Step 3 description'"
    [canEnter]="isValidFunctionReturnsObservable.bind(this)" [canExit]="isValidFunctionReturnsBoolean.bind(this)">
    <span>Step 3 content</span>
  </ng-wizard-step>
  // more steps here
</ng-wizard>