/
nav.ts
54 lines (52 loc) · 1.71 KB
/
nav.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-steps-nav',
template: `
<nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step
nzTitle="Step 1"
nzSubtitle="00:00:05"
nzStatus="finish"
nzDescription="This is a description."
></nz-step>
<nz-step
nzTitle="Step 2"
nzSubtitle="00:01:02"
nzStatus="process"
nzDescription="This is a description."
></nz-step>
<nz-step
nzTitle="Step 3"
nzSubtitle="waiting for long long time"
nzStatus="wait"
nzDescription="This is a description."
></nz-step>
</nz-steps>
<nz-steps nzType="navigation" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step nzTitle="Step 1" nzStatus="finish"></nz-step>
<nz-step nzTitle="Step 2" nzStatus="process"></nz-step>
<nz-step nzTitle="Step 3" nzStatus="wait"></nz-step>
<nz-step nzTitle="Step 4" nzStatus="wait"></nz-step>
</nz-steps>
<nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step nzTitle="finish 1" nzStatus="finish"></nz-step>
<nz-step nzTitle="finish 2" nzStatus="finish"></nz-step>
<nz-step nzTitle="current process" nzStatus="process"></nz-step>
<nz-step nzTitle="wait" nzStatus="wait" nzDisabled></nz-step>
</nz-steps>
`,
styles: [
`
nz-steps {
margin-bottom: 60px;
box-shadow: rgb(232, 232, 232) 0px -1px 0px 0 inset;
}
`
]
})
export class NzDemoStepsNavComponent {
index = 0;
onIndexChange(event: number): void {
this.index = event;
}
}