@farris/ui-wizard v0.0.29

Wizard

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

Run ng generate component component-name --project wizard to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project wizard.

Note: Don't forget to add --project wizard or else it will be added to the default project in your angular.json file.

Build

Run ng build wizard to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build wizard, go to the dist folder cd dist/wizard and run npm publish.

Running unit tests

Run ng test wizard to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

扩展结构

1. <ng-template wizardHeader> 头部区域
2. ng-template wizardStep> 自定义步骤条样式区域
3. <wizard-page></wizard-page>

参数

1. pageId 唯一标识

事件

1. stateChange 页面状态变化时触发事件 {state:'', fromPageId:'', toPageId:''}
2. pageSelected page页面发生变化时 相应事件 接受参数为 {pageId:,state:}

属性

1. stepClickable 步骤条是否可以点击 默认false
2. fill 是否撑满父节点 默认false
3. currentPageId 默认显示页面对应的pageId
4. progressData 步骤条数据信息
5. stepDirection 步骤条方向 默认 竖向 vertical 可选 横向horizontal
6. stepPosition 步骤条摆放位置 默认None 可选参数默认PageLeft、Top、HeaderRight
7. storedIndex 是否记录当前向导步骤
8. storedIndexState 是否记录当前向导步骤及状态

注意点

1. 用到该组件地方 fill为true 该组件父节点需要有高度 并且带有f-template-wizard-fill 类名 来定义内部flex布局方式

page页面结构

<wizard-page-detail>

扩展结构

<ng-template wizardPageHeader> 头部、 <ng-template wizardPageContent> 内容部分、 <ng-template wizardPageFooter> footer区域

事件

1. pagedetailSelected 当前页面被显示时监听 {pageId: , state: }

方法

1. getPageData 获取当前页数据
2. setPageData 更新当页数据
3. nextStep 下一步
4. prevStep 上一步
5. finishWizard 结束向导
6. cancelWizard 取消向导

传输数据方式

@ViewChild() detailPage

constructor(private wizardSer: WizardService) {
    this.wizardSer.getWizardData().subscribe(data => {
        this.enableBegin = data.selectUnitValue !== '';
    });
}

this.detailPage.setPageData(this.pageData);

WizardService 服务 使用

import { WizardService} from '@farris/ui-wizard'
constructor(private wizardSer: WizardService)
//获取整个向导通用的数据
this.wizardSer.getWizardData()
//设置整个向导通用的数据
this.wizardSer.setWizardData({})
//获取向导状态变化
this.wizardSer.getWizardState()

//更新某步骤条数据
this.wizardSer.updateProgressData()
//获取步骤条数据
this.wizardSer.getProgressData()