Skip to content

Commit 45c8c9c

Browse files
author
mmart1n
committed
feat(stepper): add component sample
1 parent 45d5f42 commit 45c8c9c

7 files changed

+455
-1
lines changed

‎src/app/app.component.ts

+5
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,11 @@ export class AppComponent implements OnInit {
449449
icon: 'feedback',
450450
name: 'Snackbar'
451451
},
452+
{
453+
link: '/stepper',
454+
icon: 'format_list_bulleted',
455+
name: 'Stepper'
456+
},
452457
{
453458
link: '/tabs',
454459
icon: 'tab',

‎src/app/app.module.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
154154
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
155155
import { PaginationSampleComponent } from './pagination/pagination.component';
156156
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
157+
import { IgxStepperSampleComponent } from './stepper/stepper.sample';
157158

158159
const components = [
159160
AccordionSampleComponent,
@@ -288,7 +289,8 @@ const components = [
288289
GridNestedPropsSampleComponent,
289290
IgxColumnGroupingDirective,
290291
GridColumnTypesSampleComponent,
291-
GridLocalizationSampleComponent
292+
GridLocalizationSampleComponent,
293+
IgxStepperSampleComponent
292294
];
293295

294296
@NgModule({

‎src/app/app.routing.ts

+5
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
9595
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
9696
import { PaginationSampleComponent } from './pagination/pagination.component';
9797
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
98+
import { IgxStepperSampleComponent } from './stepper/stepper.sample';
9899

99100
const appRoutes = [
100101
{
@@ -446,6 +447,10 @@ const appRoutes = [
446447
{
447448
path: 'pagination',
448449
Comment: PaginationSampleComponent
450+
},
451+
{
452+
path: 'stepper',
453+
component: IgxStepperSampleComponent
449454
}
450455
];
451456

‎src/app/routing.ts

+5
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
125125
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
126126
import { PaginationSampleComponent } from './pagination/pagination.component';
127127
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
128+
import { IgxStepperSampleComponent as StepperSampleComponent } from './stepper/stepper.sample';
128129

129130
const appRoutes = [
130131
{
@@ -598,6 +599,10 @@ const appRoutes = [
598599
},{
599600
path: 'pagination',
600601
component: PaginationSampleComponent
602+
},
603+
{
604+
path: 'stepper',
605+
component: StepperSampleComponent
601606
}
602607
];
603608

‎src/app/stepper/stepper.sample.html

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<div class="sample-actions">
2+
<button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
3+
<div class="sample-actions__btg">
4+
<p>Vertical Animation Type</p>
5+
<igx-buttongroup [values]="verticalAnimationTypes" (selected)="toggleVerticalAnimations($event)">
6+
</igx-buttongroup>
7+
</div>
8+
<div class="sample-actions__btg">
9+
<p>Horizontal Animation Type</p>
10+
<igx-buttongroup [values]="horizontalAnimationTypes" (selected)="toggleHorizontalAnimations($event)">
11+
</igx-buttongroup>
12+
</div>
13+
<igx-input-group type="border">
14+
<label igxLabel>Animation Duration</label>
15+
<input igxInput type="number" [(ngModel)]="animationDuration">
16+
<igx-suffix>ms</igx-suffix>
17+
</igx-input-group>
18+
</div>
19+
<div class="sample-actions">
20+
<igx-switch [checked]="false" (change)="setTitlePosition($event)">Set Title Position</igx-switch>
21+
<div class="sample-actions__btg">
22+
<p>Title Position</p>
23+
<igx-buttongroup [values]="titlePositions" (selected)="toggleTitlePos($event)">
24+
</igx-buttongroup>
25+
</div>
26+
<div class="sample-actions__btg">
27+
<p>Step Type</p>
28+
<igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup>
29+
</div>
30+
</div>
31+
32+
<div class="sample-stepper-wrapper">
33+
<igx-stepper #stepper [verticalAnimationType]="verticalAnimationType"
34+
[horizontalAnimationType]="horizontalAnimationType" [animationDuration]="animationDuration"
35+
(activeStepChanging)="activeStepChanging($event)" (activeStepChanged)="activeChanged($event)"
36+
[stepType]="stepType">
37+
38+
<ng-template igxStepActiveIndicator>
39+
<igx-icon>edit</igx-icon>
40+
</ng-template>
41+
42+
<!-- <ng-template igxStepInvalidIndicator>
43+
<igx-icon>error</igx-icon>
44+
</ng-template> -->
45+
46+
<!-- <ng-template igxStepCompletedIndicator>
47+
<igx-icon>check</igx-icon>
48+
</ng-template> -->
49+
50+
<igx-step #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
51+
[completed]="form1.form.valid && stepper.linear">
52+
<igx-icon igxStepIndicator>shopping_cart</igx-icon>
53+
<span igxStepTitle>Shopping Card</span>
54+
<span igxStepSubTitle>{{stepper.linear === true ? '(Required)' : 'Optional'}}</span>
55+
<div igxStepContent class="sample-body" [tabIndex]="-1">
56+
<form #form1="ngForm">
57+
<igx-input-group>
58+
<input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
59+
<label igxLabel for="firstName">First Name</label>
60+
</igx-input-group>
61+
62+
<igx-input-group>
63+
<input igxInput name="lastName" type="text" [(ngModel)]="user.lastName" />
64+
<label igxLabel for="lastName">Last Name</label>
65+
</igx-input-group>
66+
67+
<div class="nav-buttons">
68+
<button igxButton="outlined" (click)="stepper.next()"
69+
[disabled]="!form1.form.valid && stepper.linear">NEXT
70+
</button>
71+
</div>
72+
</form>
73+
</div>
74+
</igx-step>
75+
<igx-step #step1 (activeChange)="activeStepChange($event)" [completed]="true">
76+
<igx-icon igxStepIndicator>place</igx-icon>
77+
<span igxStepTitle>Delivery Address</span>
78+
<span igxStepSubTitle>(Required)</span>
79+
<div igxStepContent class="sample-body">
80+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eos asperiores, doloribus reiciendis, esse
81+
earum, iusto expedita rem quo mollitia voluptatem quas saepe quia! Rem illum quo officia eum quisquam?
82+
</div>
83+
</igx-step>
84+
85+
<igx-step *ngIf="displayStep"></igx-step>
86+
87+
<igx-step #step2 [active]="true" (activeChange)="activeStepChange($event)" [isValid]="form2.form.valid"
88+
[completed]="form2.form.valid && stepper.linear">
89+
90+
<div igxStepIndicator>
91+
<igx-avatar src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
92+
[roundShape]="true"></igx-avatar>
93+
<igx-badge icon="check" type="success"></igx-badge>
94+
</div>
95+
96+
<span igxStepTitle>User Details</span>
97+
<span igxStepSubTitle>(Requred)</span>
98+
<div igxStepContent class="sample-body">
99+
<form #form2="ngForm">
100+
<igx-input-group>
101+
<input igxInput name="password" type="password" [(ngModel)]="user1.password" required />
102+
<label igxLabel for="password">Password</label>
103+
</igx-input-group>
104+
105+
<igx-input-group>
106+
<input igxInput name="phone" type="tel" [(ngModel)]="user1.phone" required />
107+
<label igxLabel for="phone">Phone</label>
108+
</igx-input-group>
109+
110+
<igx-input-group>
111+
<input igxInput name="dateOfBirth" type="date" [(ngModel)]="user1.dateOfBirth" />
112+
<label igxLabel for="dateOfBirth">Date of Birth</label>
113+
</igx-input-group>
114+
115+
<div class="nav-buttons">
116+
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
117+
<button igxButton="outlined" (click)="stepper.next()">NEXT</button>
118+
</div>
119+
</form>
120+
</div>
121+
</igx-step>
122+
123+
<igx-step #step3 [disabled]="true" (activeChange)="activeStepChange($event)" [isValid]="form3.form.valid">
124+
<igx-icon igxStepIndicator>attach_money</igx-icon>
125+
<span igxStepTitle>Payment method</span>
126+
<span igxStepSubTitle>Currently you can pay only cash</span>
127+
<div igxStepContent class="sample-body">
128+
<form #form3="ngForm">
129+
<igx-input-group>
130+
<input igxInput name="firstName" type="text" [(ngModel)]="user2.firstName" required />
131+
<label igxLabel for="firstName">First Name</label>
132+
</igx-input-group>
133+
134+
<igx-input-group>
135+
<input igxInput name="lastName" type="text" [(ngModel)]="user2.lastName" />
136+
<label igxLabel for="lastName">Last Name</label>
137+
</igx-input-group>
138+
<igx-time-picker></igx-time-picker>
139+
140+
<div class="nav-buttons">
141+
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
142+
<button igxButton="outlined" (click)="stepper.next()" [disabled]="!form3.form.valid">NEXT
143+
</button>
144+
</div>
145+
</form>
146+
</div>
147+
</igx-step>
148+
149+
<igx-step #step4 (activeChange)="activeStepChange($event)" [isValid]="user3.valid"
150+
[completed]="user3.valid && stepper.linear">
151+
<igx-icon igxStepIndicator>notes</igx-icon>
152+
<span igxStepTitle>Additional notes</span>
153+
<span igxStepSubTitle>{{stepper.linear === true ? '(Required)' : 'Optional'}}</span>
154+
<div igxStepContent class="sample-body">
155+
<form [formGroup]="user3">
156+
<div>
157+
<igx-input-group>
158+
<input igxInput name="fullName" type="text" formControlName="fullName" />
159+
<label igxLabel for="fullName">Full Name</label>
160+
<igx-suffix>
161+
<igx-icon>person</igx-icon>
162+
</igx-suffix>
163+
</igx-input-group>
164+
<igx-input-group>
165+
<label igxLabel for="email">Email address</label>
166+
<input igxInput name="email" type="email" formControlName="email" />
167+
<igx-suffix>
168+
<igx-icon>email</igx-icon>
169+
</igx-suffix>
170+
</igx-input-group>
171+
172+
<igx-select [placeholder]="'Pick One'">
173+
<igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
174+
<igx-select-item [value]="'Orange'">Orange</igx-select-item>
175+
<igx-select-item [value]="'Grapes'">Grapes</igx-select-item>
176+
<igx-select-item [value]="'Banana'">Banana</igx-select-item>
177+
</igx-select>
178+
</div>
179+
<div class="nav-buttons">
180+
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
181+
<button igxButton="outlined" (click)="stepper.next()"
182+
[disabled]="!user3.valid && stepper.linear">NEXT
183+
</button>
184+
</div>
185+
</form>
186+
</div>
187+
</igx-step>
188+
189+
<igx-step #step5 (activeChange)="activeStepChange($event)" [isValid]="user4.valid">
190+
<igx-icon igxStepIndicator>receipt_long</igx-icon>
191+
<span igxStepTitle>Finish order</span>
192+
<span igxStepSubTitle>(#12542653)</span>
193+
<div igxStepContent class="sample-body">
194+
<form [formGroup]="user4">
195+
<div>
196+
<igx-time-picker name="dateTime" formControlName="dateTime"></igx-time-picker>
197+
<igx-input-group>
198+
<igx-prefix>+359</igx-prefix>
199+
<label igxLabel for="phone">Phone</label>
200+
<input igxInput name="phone" type="text" formControlName="phone" />
201+
<igx-suffix>
202+
<igx-icon>phone</igx-icon>
203+
</igx-suffix>
204+
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
205+
</igx-input-group>
206+
</div>
207+
<div class="nav-buttons">
208+
<button igxButton="outlined" (click)="stepper.prev()">PREV</button>
209+
<button igxButton="outlined" [disabled]="!user4.valid">Submit</button>
210+
</div>
211+
</form>
212+
</div>
213+
</igx-step>
214+
</igx-stepper>
215+
</div>
216+
217+
<div class="sample-actions">
218+
<button igxButton="outlined" (click)="stepper.contentTop = !stepper.contentTop">change horizontal content
219+
position</button>
220+
<button igxButton="outlined" (click)="stepper.navigateTo(2)">navigate to third</button>
221+
<button igxButton="outlined" (click)="stepper.reset()">reset</button>
222+
<igx-switch [(ngModel)]="stepper.linear">Linear</igx-switch>
223+
<igx-switch [(ngModel)]="displayStep">Display Step</igx-switch>
224+
</div>

‎src/app/stepper/stepper.sample.scss

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.sample-actions {
2+
margin: 20px 0;
3+
display: flex;
4+
gap: 25px;
5+
6+
p {
7+
margin-top: 0;
8+
margin-bottom: 4px;
9+
font-size: 14px;
10+
}
11+
12+
button {
13+
align-self: center;
14+
}
15+
16+
&__btg {
17+
width: 250px;
18+
}
19+
}
20+
21+
igx-badge {
22+
position: absolute;
23+
top: -6px;
24+
right: -6px;
25+
width: 16px;
26+
height: 16px;
27+
min-width: 0;
28+
}
29+
30+
.nav-buttons {
31+
margin: 40px 0;
32+
33+
> * {
34+
margin-right: 16px;
35+
}
36+
}
37+
38+
.sample-stepper-wrapper {
39+
margin: 16px 0;
40+
padding: 16px;
41+
border: 1px solid rgba(54, 54, 54, .43);
42+
}

0 commit comments

Comments
 (0)