Skip to content

Commit 71cb69f

Browse files
jwshinjwshinjwshinjwshin
committed
Merge branch 'stepper' of github.com:angular/material2 into forms1
2 parents 1acfef4 + b0f11d6 commit 71cb69f

File tree

8 files changed

+294
-45
lines changed

8 files changed

+294
-45
lines changed

‎src/demo-app/stepper/stepper-demo.html

Lines changed: 108 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,119 @@ <h2>Linear Vertical Stepper Demo</h2>
4141
</md-vertical-stepper>
4242
</form>
4343

44+
<h2>Vertical Stepper Demo</h2>
45+
<md-vertical-stepper>
46+
<md-step>
47+
<ng-template mdStepLabel>Fill out your name</ng-template>
48+
<md-input-container>
49+
<input mdInput placeholder="First Name">
50+
<md-error>This field is required</md-error>
51+
</md-input-container>
52+
53+
<md-input-container>
54+
<input mdInput placeholder="Last Name">
55+
<md-error>This field is required</md-error>
56+
</md-input-container>
57+
<div>
58+
<button md-button mdStepperNext type="button">Next</button>
59+
</div>
60+
</md-step>
61+
62+
<md-step>
63+
<ng-template mdStepLabel>
64+
<div>Fill out your phone number</div>
65+
</ng-template>
66+
<md-input-container>
67+
<input mdInput placeholder="Phone number">
68+
<md-error>This field is required</md-error>
69+
</md-input-container>
70+
<div>
71+
<button md-button mdStepperPrevious type="button">Back</button>
72+
<button md-button mdStepperNext type="button">Next</button>
73+
</div>
74+
</md-step>
75+
76+
<md-step>
77+
<ng-template mdStepLabel>
78+
<div>Fill out your address</div>
79+
</ng-template>
80+
<md-input-container>
81+
<input mdInput placeholder="Address">
82+
<md-error>This field is required</md-error>
83+
</md-input-container>
84+
<div>
85+
<button md-button mdStepperPrevious type="button">Back</button>
86+
<button md-button mdStepperNext type="button">Next</button>
87+
</div>
88+
</md-step>
89+
90+
<md-step>
91+
<ng-template mdStepLabel>Confirm your information</ng-template>
92+
Everything seems correct.
93+
<div>
94+
<button md-button>Done</button>
95+
</div>
96+
</md-step>
97+
</md-vertical-stepper>
98+
4499
<h2>Horizontal Stepper Demo</h2>
45100
<md-horizontal-stepper>
46-
<md-step *ngFor="let step of steps" [label]="step.label">
101+
<md-step>
102+
<ng-template mdStepLabel>Fill out your name</ng-template>
47103
<md-input-container>
48-
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
104+
<input mdInput placeholder="First Name">
105+
<md-error>This field is required</md-error>
106+
</md-input-container>
107+
108+
<md-input-container>
109+
<input mdInput placeholder="Last Name">
110+
<md-error>This field is required</md-error>
49111
</md-input-container>
50112
<div>
51-
<button md-button mdStepperPrevious>Back</button>
52-
<button md-button mdStepperNext>Next</button>
113+
<button md-button mdStepperNext type="button">Next</button>
114+
</div>
115+
</md-step>
116+
117+
<md-step>
118+
<ng-template mdStepLabel>
119+
<div>Fill out your phone number</div>
120+
</ng-template>
121+
<md-input-container>
122+
<input mdInput placeholder="Phone number">
123+
<md-error>This field is required</md-error>
124+
</md-input-container>
125+
<div>
126+
<button md-button mdStepperPrevious type="button">Back</button>
127+
<button md-button mdStepperNext type="button">Next</button>
128+
</div>
129+
</md-step>
130+
131+
<md-step>
132+
<ng-template mdStepLabel>
133+
<div>Fill out your address</div>
134+
</ng-template>
135+
<md-input-container>
136+
<input mdInput placeholder="Address">
137+
<md-error>This field is required</md-error>
138+
</md-input-container>
139+
<div>
140+
<button md-button mdStepperPrevious type="button">Back</button>
141+
<button md-button mdStepperNext type="button">Next</button>
142+
</div>
143+
</md-step>
144+
145+
<md-step>
146+
<ng-template mdStepLabel>Confirm your information</ng-template>
147+
Everything seems correct.
148+
<div>
149+
<button md-button>Done</button>
53150
</div>
54151
</md-step>
55152
</md-horizontal-stepper>
56153

57-
<h2>Horizontal Stepper Demo with Templated Label</h2>
154+
<h2>Horizontal Stepper Demo</h2>
58155
<md-horizontal-stepper>
59-
<md-step *ngFor="let step of steps">
60-
<ng-template mdStepLabel>{{step.label}}</ng-template>
156+
<md-step *ngFor="let step of steps" [label]="step.label">
61157
<md-input-container>
62158
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
63159
</md-input-container>
@@ -68,9 +164,10 @@ <h2>Horizontal Stepper Demo with Templated Label</h2>
68164
</md-step>
69165
</md-horizontal-stepper>
70166

71-
<h2>Vertical Stepper Demo</h2>
72-
<md-vertical-stepper>
73-
<md-step *ngFor="let step of steps" [label]="step.label">
167+
<h2>Horizontal Stepper Demo with Templated Label</h2>
168+
<md-horizontal-stepper>
169+
<md-step *ngFor="let step of steps">
170+
<ng-template mdStepLabel>{{step.label}}</ng-template>
74171
<md-input-container>
75172
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
76173
</md-input-container>
@@ -79,4 +176,4 @@ <h2>Vertical Stepper Demo</h2>
79176
<button md-button mdStepperNext>Next</button>
80177
</div>
81178
</md-step>
82-
</md-vertical-stepper>
179+
</md-horizontal-stepper>

‎src/lib/core/theming/_all-theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
@import '../../sidenav/sidenav-theme';
2424
@import '../../slide-toggle/slide-toggle-theme';
2525
@import '../../slider/slider-theme';
26+
@import '../../stepper/stepper-theme';
2627
@import '../../tabs/tabs-theme';
2728
@import '../../toolbar/toolbar-theme';
2829
@import '../../tooltip/tooltip-theme';
@@ -55,6 +56,7 @@
5556
@include mat-sidenav-theme($theme);
5657
@include mat-slide-toggle-theme($theme);
5758
@include mat-slider-theme($theme);
59+
@include mat-stepper-theme($theme);
5860
@include mat-tabs-theme($theme);
5961
@include mat-toolbar-theme($theme);
6062
@include mat-tooltip-theme($theme);

‎src/lib/stepper/_stepper-theme.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import '../core/theming/palette';
2+
@import '../core/theming/theming';
3+
@import '../core/typography/_typography-utils.scss';
4+
5+
@mixin mat-stepper-theme($theme) {
6+
$foreground: map-get($theme, foreground);
7+
$background: map-get($theme, background);
8+
$primary: map-get($theme, primary);
9+
10+
.mat-horizontal-stepper-header, .mat-vertical-stepper-header {
11+
12+
.mat-stepper-label {
13+
color: mat-color($foreground, text);
14+
}
15+
16+
.mat-stepper-index {
17+
background-color: mat-color($primary);
18+
color: mat-color($primary, default-contrast);
19+
}
20+
21+
&[aria-selected='false'] {
22+
.mat-stepper-label {
23+
color: mat-color($foreground, disabled-text);
24+
}
25+
26+
.mat-stepper-index {
27+
background-color: mat-color($foreground, disabled-text);
28+
}
29+
}
30+
}
31+
32+
.mat-stepper-horizontal, .mat-stepper-vertical {
33+
background-color: mat-color($background, card);
34+
}
35+
36+
.vertical-content-container {
37+
border-left-color: mat-color($foreground, divider);
38+
}
39+
40+
.connector-line {
41+
border-top-color: mat-color($foreground, divider);
42+
}
43+
}

‎src/lib/stepper/stepper-horizontal.html

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
1-
<div #stepHeader *ngFor="let step of _steps; let i = index; let isLast = last"
2-
class="mat-stepper-header" role="tab"
3-
[id]="_getStepLabelId(i)"
4-
[attr.aria-controls]="_getStepContentId(i)"
5-
[attr.aria-selected]="selectedIndex == i"
6-
[tabIndex]="_focusIndex == i ? 0 : -1"
7-
(click)="step.select()"
8-
(keydown)="_onKeydown($event)">
9-
<div class="mat-stepper-index">
10-
{{i + 1}}
11-
</div>
1+
<div class="mat-horizontal-stepper-header-container">
2+
<ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
3+
<div #stepHeader class="mat-horizontal-stepper-header"
4+
role="tab"
5+
[id]="_getStepLabelId(i)"
6+
[attr.aria-controls]="_getStepContentId(i)"
7+
[attr.aria-selected]="selectedIndex == i"
8+
[tabIndex]="_focusIndex == i ? 0 : -1"
9+
(click)="step.select()"
10+
(keydown)="_onKeydown($event)">
11+
<div class="mat-stepper-index">
12+
{{i + 1}}
13+
</div>
1214

13-
<div class="mat-stepper-label">
14-
<!-- If there is a label template, use it. -->
15-
<ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
16-
</ng-container>
17-
<!-- It there is no label template, fall back to the text label. -->
18-
<div *ngIf="!step.stepLabel">{{step.label}}</div>
19-
</div>
15+
<div class="mat-stepper-label">
16+
<!-- If there is a label template, use it. -->
17+
<ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
18+
</ng-container>
19+
<!-- It there is no label template, fall back to the text label. -->
20+
<div *ngIf="!step.stepLabel">{{step.label}}</div>
21+
</div>
22+
</div>
2023

21-
<div *ngIf="!isLast" class="connector-line"></div>
24+
<div *ngIf="!isLast" class="connector-line"></div>
25+
</ng-container>
2226
</div>
2327

2428
<div *ngFor="let step of _steps; let i = index"
25-
class="mat-stepper-content" role="tabpanel"
29+
class="mat-horizontal-stepper-content" role="tabpanel"
2630
[id]="_getStepContentId(i)"
2731
[attr.aria-labelledby]="_getStepLabelId(i)"
2832
[attr.aria-expanded]="selectedIndex == i">

‎src/lib/stepper/stepper-horizontal.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
1313
moduleId: module.id,
1414
selector: 'md-horizontal-stepper, mat-horizontal-stepper',
1515
templateUrl: 'stepper-horizontal.html',
16-
styleUrls: ['stepper.scss'],
16+
styleUrls: ['stepper.css'],
1717
inputs: ['selectedIndex'],
1818
host: {
1919
'class': 'mat-stepper-horizontal',

‎src/lib/stepper/stepper-vertical.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div *ngFor="let step of _steps; let i = index; let isLast = last">
2-
<div #stepHeader class="mat-stepper-header" role="tab"
1+
<div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
2+
<div #stepHeader class="mat-vertical-stepper-header" role="tab"
33
[id]="_getStepLabelId(i)"
44
[attr.aria-controls]="_getStepContentId(i)"
55
[attr.aria-selected]="selectedIndex == i"
@@ -19,11 +19,12 @@
1919
</div>
2020

2121
</div>
22-
<div *ngIf="!isLast" class="connector-line"></div>
23-
<div class="mat-stepper-content" role="tabpanel"
24-
[id]="_getStepContentId(i)"
25-
[attr.aria-labelledby]="_getStepLabelId(i)"
26-
[attr.aria-expanded]="selectedIndex == i">
27-
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
22+
<div class="vertical-content-container">
23+
<div class="mat-vertical-stepper-content" role="tabpanel"
24+
[id]="_getStepContentId(i)"
25+
[attr.aria-labelledby]="_getStepLabelId(i)"
26+
[attr.aria-expanded]="selectedIndex == i">
27+
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
28+
</div>
2829
</div>
2930
</div>

‎src/lib/stepper/stepper-vertical.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
1313
moduleId: module.id,
1414
selector: 'md-vertical-stepper, mat-vertical-stepper',
1515
templateUrl: 'stepper-vertical.html',
16-
styleUrls: ['stepper.scss'],
16+
styleUrls: ['stepper.css'],
1717
inputs: ['selectedIndex'],
1818
host: {
1919
'class': 'mat-stepper-vertical',

0 commit comments

Comments
 (0)