Skip to content

Commit 88875aa

Browse files
author
mmart1n
committed
feat(stepper): control sample animation settings
1 parent 93f29ce commit 88875aa

File tree

3 files changed

+87
-33
lines changed

3 files changed

+87
-33
lines changed

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

+29-21
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
1-
<!-- <igx-stepper #stepperNg>
2-
<igx-step *ngFor="let n of [1, 2, 3]">
3-
<igx-icon>done</igx-icon>
4-
<label igxLabel>Step No{{n}}</label>
5-
</igx-step>
6-
</igx-stepper>
7-
<button (click)="stepperNg.navigateTo(2)">Navigate to 2 Step</button> -->
8-
<igx-stepper #stepper (activeStepChanged)="activeStepChanged($event)" (activeStepChanging)="activeStepChanging($event)" [orientation]="'Horizontal'">
9-
<igx-step [active]="true" #step>
1+
<div class="sample-actions">
2+
<!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
3+
<!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
4+
<!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
5+
<button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
6+
<div>
7+
<p>Vertical Animation Settings</p>
8+
<igx-buttongroup [values]="verticalAnimations" (selected)="toggleVerticalAnimations($event)">
9+
</igx-buttongroup>
10+
</div>
11+
<div>
12+
<p>Horizontal Animation Type</p>
13+
<igx-buttongroup [values]="horizontalAnimationTypes" (selected)="toggleHorizontalAnimations($event)">
14+
</igx-buttongroup>
15+
</div>
16+
<igx-input-group type="border">
17+
<label igxLabel>Horizontal Animation Duration</label>
18+
<input igxInput type="number" [(ngModel)]="animationDuration">
19+
<igx-suffix>ms</igx-suffix>
20+
</igx-input-group>
21+
</div>
22+
<igx-stepper #stepper [verticalAnimationSettings]="animationSettings" [horizontalAnimationType]="animationType"
23+
[horizontalAnimationDuration]="animationDuration" (activeStepChanged)="activeChanged($event)"
24+
[orientation]="'Horizontal'">
25+
<igx-step [active]="true" #step (activeChange)="activeStepChange($event)">
1026
<igx-icon igxStepIcon>done</igx-icon>
1127
<label igxStepLabel>Step No 1</label>
1228
<div>Test me daddy</div>
1329
</igx-step>
1430

15-
<igx-step #step2 [skip]="true" (activeChanged)="activeStepChanged($event)">
31+
<igx-step #step2 [skip]="true" (activeChange)="activeStepChange($event)">
1632
<igx-icon igxStepIcon>calendar_today</igx-icon>
1733
<label igxStepLabel>Step No 2</label>
1834
<igx-date-picker></igx-date-picker>
1935
</igx-step>
2036

21-
<igx-step #step3 [disabled]="true">
37+
<igx-step #step3 [disabled]="true" (activeChange)="activeStepChange($event)">
2238
<igx-icon igxStepIcon>alarm</igx-icon>
2339
<label igxStepLabel>Step No 3</label>
2440
<igx-time-picker></igx-time-picker>
2541
</igx-step>
2642

27-
<igx-step #step4 [active]="true" (activeChanged)="activeStepChanged($event)">
43+
<igx-step #step4 [active]="true" (activeChange)="activeStepChange($event)">
2844
<igx-icon igxStepIcon>check_circle</igx-icon>
2945
<label igxStepLabel>Step No 4</label>
3046
<igx-select [placeholder]="'Pick One'">
@@ -35,19 +51,11 @@
3551
</igx-select>
3652
</igx-step>
3753

38-
<igx-step #step5>
54+
<igx-step #step5 (activeChange)="activeStepChange($event)">
3955
<igx-icon igxStepIcon>delete</igx-icon>
4056
<label igxStepLabel>Step No 5</label>
4157
<div>
4258
<button igxButton>Click me</button>
4359
</div>
4460
</igx-step>
4561
</igx-stepper>
46-
47-
<div class="sample-actions">
48-
<!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
49-
<!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
50-
<!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
51-
<button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
52-
</div>
53-

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
.sample-actions {
2-
margin-top: 20px;
2+
margin: 20px 0;
33
display: flex;
4-
align-items: center;
4+
gap: 25px;
5+
}
6+
7+
::ng-deep {
8+
.igx-button-group {
9+
width: 250px;
10+
}
511
}

‎src/app/stepper/stepper.sample.ts

+50-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { AfterViewInit, Component, ViewChild } from '@angular/core';
1+
import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
2+
import { growVerIn, growVerOut, slideInLeft, slideOutRight } from 'igniteui-angular';
3+
import { ToggleAnimationSettings } from 'projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component';
24
import { IgxStepperOrienatation } from 'projects/igniteui-angular/src/lib/stepper/common';
35
import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/igx-stepper.component';
46

@@ -8,6 +10,12 @@ import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/i
810
})
911
export class IgxStepperSampleComponent implements AfterViewInit {
1012
@ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent;
13+
public animationType = 'slide';
14+
public animationSettings: ToggleAnimationSettings = {
15+
openAnimation: growVerIn,
16+
closeAnimation: growVerOut
17+
};
18+
public animationDuration = 320;
1119
// public stepType = IgxStepType.Full;
1220
// public labelPos = IgxStepperLabelPosition.Bottom;
1321
// public stepTypes = [
@@ -25,26 +33,58 @@ export class IgxStepperSampleComponent implements AfterViewInit {
2533
// { label: 'Start', labelPos: IgxStepperLabelPosition.Start,
2634
// selected: this.labelPos === IgxStepperLabelPosition.Start, togglable: true }
2735
// ];
36+
public horizontalAnimationTypes = [];
37+
38+
public verticalAnimations = [];
39+
40+
constructor(private cdr: ChangeDetectorRef) {
41+
this.horizontalAnimationTypes = [
42+
{ label: 'slide', animationType: 'slide', selected: this.animationType === 'slide', togglable: true },
43+
{ label: 'fade', animationType: 'fade', selected: this.animationType === 'fade', togglable: true },
44+
{ label: 'none', animationType: 'none', selected: this.animationType === 'none', togglable: true }
45+
];
46+
this.verticalAnimations = [
47+
{
48+
label: 'default',
49+
animationSettings: { openAnimation: growVerIn, closeAnimation: growVerOut },
50+
selected: this.animationSettings.openAnimation === growVerIn,
51+
togglable: true
52+
},
53+
{
54+
label: 'custom',
55+
animationSettings: { openAnimation: slideInLeft, closeAnimation: slideOutRight },
56+
selected: this.animationSettings.openAnimation === slideOutRight,
57+
togglable: true
58+
}
59+
];
60+
}
61+
2862
public ngAfterViewInit() {
29-
// requestAnimationFrame(() => {
30-
// this.stepper.steps[1].completedStyle = IgxStepperProgressLine.Dashed;
31-
// });
3263
}
64+
3365
// public toggleStepTypes(event){
3466
// this.stepType = this.stepTypes[event.index].stepType;
3567
// }
68+
69+
public toggleHorizontalAnimations(event) {
70+
this.animationType = this.horizontalAnimationTypes[event.index].animationType;
71+
}
72+
73+
public toggleVerticalAnimations(event) {
74+
this.animationSettings = this.verticalAnimations[event.index].animationSettings;
75+
}
3676
// public toggleLabelPos(event){
3777
// this.labelPos = this.labelPositions[event.index].labelPos;
3878
// }
3979

40-
public activeChanged(event, step) {
41-
console.log('ACTIVE CHANGED');
42-
console.log(event, step);
80+
81+
public activeChanged(event) {
82+
console.log('GOLQM ACTIVE CHANGED');
83+
// console.log(event);
4384
}
4485

45-
public activeStepChanged(ev) {
46-
console.log('ACTIVE STEP CHANGED');
47-
console.log(ev);
86+
public activeStepChange(ev) {
87+
console.log('MALUK CHANGE', ev);
4888
}
4989

5090
public activeStepChanging(ev) {

0 commit comments

Comments
 (0)