Skip to content

Commit 578e230

Browse files
Mirror2Tinardkmaster
Mirror2Tina
authored and
rdkmaster
committed
特性：支持jigsaw-steps组件
* drawer function dev * add z-index to drawer and add drawer to z-index demo * optimize demo * async add animation to init without animation * drawer 双向绑定开关 * drawer demo 开关时 log 修改 * 将drawer 的position属性类型string 改为"left" | "right" | "top" | "bottom" * steps添加组件文件 添加demo页 * steps 控件实现 * steps demos * demo调整 * steps垂直状态添加 * css调整 * better demo code * 方法名修改 * css调整 * better demo code; add api doc * add api doc * remove width for demo * fix build error * css better * csschange * 加入prefectScrollbar，优化样式 * add since to api doc * 样式调整处理图片旋转引起的高度超标 * fix demo * hide unecessary scrollbar * 优化代码更改class名字增加新demo等 * iebug * ie兼容修复
1 parent 90544d5 commit 578e230

25 files changed

+893
-8
lines changed

‎src/app/demo-list.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {routerConfig as rangeTimeConfig} from "./demo/range-time/demo-set.module
2626
import {routerConfig as scrollbarConfig} from "./demo/scrollbar/demo-set.module";
2727
import {routerConfig as selectConfig} from "./demo/select/demo-set.module";
2828
import {routerConfig as sliderConfig} from "./demo/slider/demo-set.module";
29+
import {routerConfig as stepsConfig} from "./demo/steps/demo-set.module";
2930
import {routerConfig as switchConfig} from "./demo/switch/demo-set.module";
3031
import {routerConfig as tableConfig} from "./demo/table/demo-set.module";
3132
import {routerConfig as tabsConfig} from "./demo/tab/demo-set.module";
@@ -107,6 +108,7 @@ export class DemoListManager {
107108
this._addRouterConfig(routerConfig, 'scrollbar', scrollbarConfig);
108109
this._addRouterConfig(routerConfig, 'select', selectConfig);
109110
this._addRouterConfig(routerConfig, 'slider', sliderConfig);
111+
this._addRouterConfig(routerConfig, 'steps', stepsConfig);
110112
this._addRouterConfig(routerConfig, 'switch', switchConfig);
111113
this._addRouterConfig(routerConfig, 'table', tableConfig);
112114
this._addRouterConfig(routerConfig, 'tab', tabsConfig);

‎src/app/demo/drawer/basic/demo.component.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,3 @@
1010
margin: 36px;
1111
text-align: center;
1212
}
13-
14-

‎src/app/demo/steps/basic/demo.component.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- ignore the following lines, they are not important to this demo -->
2+
<jigsaw-demo-description [summary]="summary" [content]="description">
3+
</jigsaw-demo-description>
4+
5+
6+
<!-- start to learn the demo from here -->
7+
<jigsaw-steps>
8+
<jigsaw-step-item *ngFor="let step of steps" [status]="step.status">
9+
{{step.title}}
10+
</jigsaw-step-item>
11+
</jigsaw-steps>

‎src/app/demo/steps/basic/demo.component.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {Component} from "@angular/core";
2+
3+
@Component({
4+
templateUrl: './demo.component.html',
5+
})
6+
export class StepsHorizontalBasicComponent {
7+
steps = [
8+
{
9+
title: 'done',
10+
status: "done"
11+
},
12+
{
13+
title: 'error',
14+
status: "error"
15+
},
16+
{
17+
title: 'processing',
18+
status: "processing"
19+
},
20+
{
21+
title: 'warning',
22+
status: "warning"
23+
},
24+
{
25+
title: 'skipped',
26+
status: "skipped"
27+
},
28+
{
29+
title: 'waiting',
30+
status: "waiting"
31+
},
32+
];
33+
34+
// ====================================================================
35+
// ignore the following lines, they are not important to this demo
36+
// ====================================================================
37+
summary: string = '本demo演示了jigsaw-steps组件最简单的用法，所有配置项都用默认';
38+
description: string = '';
39+
}

‎src/app/demo/steps/basic/demo.module.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {NgModule} from "@angular/core";
2+
import {CommonModule} from "@angular/common";
3+
import {JigsawStepsModule} from "jigsaw/component/steps/index";
4+
import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
5+
import {StepsHorizontalBasicComponent} from './demo.component';
6+
7+
@NgModule({
8+
imports: [
9+
CommonModule,JigsawDemoDescriptionModule,JigsawStepsModule
10+
11+
],
12+
declarations: [StepsHorizontalBasicComponent],
13+
exports: [StepsHorizontalBasicComponent]
14+
})
15+
export class StepsHorizontalBasicModule {
16+
}

‎src/app/demo/steps/custom-icons/demo.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- ignore the following lines, they are not important to this demo -->
2+
<jigsaw-demo-description [summary]="summary" [content]="description">
3+
</jigsaw-demo-description>
4+
5+
6+
<!-- start to learn the demo from here -->
7+
<jigsaw-steps preSize="large">
8+
<jigsaw-step-item *ngFor="let step of steps" [status]="step.status"
9+
[waitingIcon]="step.waitingIcon"
10+
[doneIcon]="step.doneIcon"
11+
[processingIcon]="step.processingIcon"
12+
[errorIcon]="step.errorIcon"
13+
[warningIcon]="step.warningIcon"
14+
[skippedIcon]="step.skippedIcon">
15+
{{step.title}}
16+
</jigsaw-step-item>
17+
</jigsaw-steps>

‎src/app/demo/steps/custom-icons/demo.component.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {Component} from "@angular/core";
2+
3+
@Component({
4+
templateUrl:'./demo.component.html'
5+
})
6+
export class StepsCustomIconsComponent {
7+
steps = [
8+
{
9+
title: 'done',
10+
status: "done",
11+
waitingIcon: 'fa-hand-stop-o',
12+
doneIcon:'fa-hand-peace-o',
13+
processingIcon:'fa-hourglass fa-spin fa-2x fa-fw',
14+
errorIcon:'fa-window-close-o',
15+
warningIcon:'fa-exclamation-circle',
16+
skippedIcon:'fa-share-square'
17+
},
18+
{
19+
title: 'error',
20+
status: "error",
21+
waitingIcon: 'fa-hand-stop-o',
22+
doneIcon:'fa-hand-peace-o',
23+
processingIcon:'fa-hourglass fa-spin fa-2x fa-fw',
24+
errorIcon:'fa-window-close-o',
25+
warningIcon:'fa-exclamation-circle',
26+
skippedIcon:'fa-share-square'
27+
},
28+
{
29+
title: 'processing',
30+
status: "processing",
31+
waitingIcon: 'fa-hand-stop-o',
32+
doneIcon:'fa-hand-peace-o',
33+
processingIcon:'fa-hourglass fa-spin fa-fw',
34+
errorIcon:'fa-window-close-o',
35+
warningIcon:'fa-exclamation-circle',
36+
skippedIcon:'fa-share-square'
37+
},
38+
{
39+
title: 'warning',
40+
status: "warning",
41+
waitingIcon: 'fa-hand-stop-o',
42+
doneIcon:'fa-hand-peace-o',
43+
processingIcon:'fa-hourglass fa-spin fa-2x fa-fw',
44+
errorIcon:'fa-window-close-o',
45+
warningIcon:'fa-exclamation-circle',
46+
skippedIcon:'fa-share-square'
47+
},
48+
{
49+
title: 'skipped',
50+
status: "skipped",
51+
waitingIcon: 'fa-hand-stop-o',
52+
doneIcon:'fa-hand-peace-o',
53+
processingIcon:'fa-hourglass fa-spin fa-2x fa-fw',
54+
errorIcon:'fa-window-close-o',
55+
warningIcon:'fa-exclamation-circle',
56+
skippedIcon:'fa-share-square'
57+
},
58+
{
59+
title: 'waiting',
60+
status: "waiting",
61+
waitingIcon: 'fa-hand-stop-o',
62+
doneIcon:'fa-hand-peace-o',
63+
processingIcon:'fa-hourglass fa-spin fa-fw',
64+
errorIcon:'fa-window-close-o',
65+
warningIcon:'fa-exclamation-circle',
66+
skippedIcon:'fa-share-square'
67+
},
68+
];
69+
70+
// ====================================================================
71+
// ignore the following lines, they are not important to this demo
72+
// ====================================================================
73+
summary: string = '本demo演示了jigsaw-steps组件自定义状态ICON图的方法，注意仅支持font-awesome和Jigsaw自研的iconfont图标';
74+
description: string = '';
75+
}

‎src/app/demo/steps/custom-icons/demo.module.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {NgModule} from "@angular/core";
2+
import {StepsCustomIconsComponent} from "./demo.component";
3+
import {CommonModule} from "@angular/common";
4+
import {JigsawStepsModule} from "../../../../jigsaw/component/steps";
5+
import {JigsawDemoDescriptionModule} from "../../../demo-description/demo-description";
6+
7+
@NgModule({
8+
imports:[CommonModule,JigsawStepsModule,JigsawDemoDescriptionModule],
9+
declarations:[StepsCustomIconsComponent],
10+
exports:[StepsCustomIconsComponent]
11+
12+
})
13+
export class StepsCustomIconsModule {
14+
15+
}

‎src/app/demo/steps/demo-set.module.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {NgModule} from "@angular/core";
2+
import {RouterModule} from "@angular/router";
3+
import {StepsHorizontalBasicModule} from "./basic/demo.module";
4+
import {StepsClickChangeStatusModule} from "./step-interactive/demo.module";
5+
import {StepsVerticalModule} from "./vertical/demo.module";
6+
import {StepsHorizontalBasicComponent} from "./basic/demo.component";
7+
import {StepsVerticalFullComponent} from "./vertical/demo.component";
8+
import {StepsClickChangeStatusComponent} from "./step-interactive/demo.component";
9+
import {StepsCustomIconsModule} from "./custom-icons/demo.module";
10+
import {StepsCustomIconsComponent} from "./custom-icons/demo.component";
11+
12+
export const routerConfig = [
13+
{
14+
path: 'basic', component: StepsHorizontalBasicComponent,
15+
},
16+
{
17+
path: 'vertical', component: StepsVerticalFullComponent,
18+
19+
},
20+
{
21+
path: 'step-interactive', component: StepsClickChangeStatusComponent
22+
},
23+
{
24+
path:'custom-icons',component:StepsCustomIconsComponent
25+
}
26+
];
27+
28+
@NgModule({
29+
imports: [
30+
RouterModule.forChild(routerConfig),
31+
StepsHorizontalBasicModule,
32+
StepsClickChangeStatusModule,
33+
StepsCustomIconsModule,
34+
StepsVerticalModule
35+
]
36+
})
37+
export class StepsDemoModule {
38+
39+
}

‎src/app/demo/steps/step-interactive/demo.component.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- ignore the following lines, they are not important to this demo -->
2+
<jigsaw-demo-description [summary]="summary" [content]="description">
3+
</jigsaw-demo-description>
4+
5+
6+
<!-- start to learn the demo from here -->
7+
<jigsaw-steps preSize="large" direction="horizontal">
8+
<jigsaw-step-item *ngFor="let step of steps; index as idx" [status]="step.status">
9+
<div jigsaw-title>{{step.title}}</div>
10+
<div jigsaw-sub-title
11+
trustedHtml="单击<a (click)='skipStep({{idx}})'>这里</a>跳过此步骤"
12+
[trustedHtmlContext]="this"></div>
13+
</jigsaw-step-item>
14+
</jigsaw-steps>

0 commit comments

Comments
 (0)