ProgressStep

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

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

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

Build

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

Publishing

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

Running unit tests

Run ng test progress-step 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. progressStepItem 单个步骤条样式 <ng-template progressStepItem> Context内容为： { step 该步骤条对象, index当前步骤条索引, activeIndex 当前active步骤条索引值, direction 当前步骤条展示方向 横向 竖向,length 当前步骤条不包含隐藏步骤的长度}

属性

1. stepData 进度条数据 包含 activeIndex当前完成步骤索引值 0开始 ；stepMessages 进度条信息
2. direction 排列方式 默认横向horizontal 可选竖向排列vertical
3. enableClick 步骤条是否支持点击 默认false
4. fill 平铺
5. fHeight 竖向步骤条 fill时需要传递的高度

步骤条每一步属性

1. id 唯一标识
2. title 步骤名称
3. statue 设置当前步骤的状态 finish active error 如果不传 默认按照activeIndex确定状态,
4. hidden 该步骤是否隐藏
5. icon 该步骤对应的图标

方法

1. nextStep 下一步 返回activeIndex 当前步骤的索引值
2. prevStep 上一步
3. getCurrentStepIndex 获得当前active索引
4. goStep 跳转到某一步 接收参数为索引

事件

1. stepClick 点击某一步 接收参数 step 当前步骤数据 index当前步骤索引