@farris/ui-progress-step v0.2.0
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 yourangular.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 当前步骤条不包含隐藏步骤的长度}
属性
- stepData 进度条数据 包含 activeIndex当前完成步骤索引值 0开始 ;stepMessages 进度条信息
- direction 排列方式 默认横向horizontal 可选竖向排列vertical
- enableClick 步骤条是否支持点击 默认false
- fill 平铺
- fHeight 竖向步骤条 fill时需要传递的高度
步骤条每一步属性
- id 唯一标识
- title 步骤名称
- statue 设置当前步骤的状态 finish active error 如果不传 默认按照activeIndex确定状态,
- hidden 该步骤是否隐藏
- icon 该步骤对应的图标
方法
- nextStep 下一步 返回activeIndex 当前步骤的索引值
- prevStep 上一步
- getCurrentStepIndex 获得当前active索引
- goStep 跳转到某一步 接收参数为索引
事件
- stepClick 点击某一步 接收参数 step 当前步骤数据 index当前步骤索引
6 months ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago