Skip to content

Commit

Permalink
feat(stepper): control sample animation settings
Browse files Browse the repository at this point in the history
  • Loading branch information
mmart1n committed Sep 16, 2021
1 parent 2ba2e79 commit 0174e71
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 33 deletions.
50 changes: 29 additions & 21 deletions src/app/stepper/stepper.sample.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,46 @@
<!-- <igx-stepper #stepperNg>
<igx-step *ngFor="let n of [1, 2, 3]">
<igx-icon>done</igx-icon>
<label igxLabel>Step No{{n}}</label>
</igx-step>
</igx-stepper>
<button (click)="stepperNg.navigateTo(2)">Navigate to 2 Step</button> -->
<igx-stepper #stepper (activeStepChanged)="activeStepChanged($event)" (activeStepChanging)="activeStepChanging($event)" [orientation]="'Horizontal'">
<igx-step [active]="true" #step>
<div class="sample-actions">
<!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
<!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
<!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
<button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
<div>
<p>Vertical Animation Settings</p>
<igx-buttongroup [values]="verticalAnimations" (selected)="toggleVerticalAnimations($event)">
</igx-buttongroup>
</div>
<div>
<p>Horizontal Animation Type</p>
<igx-buttongroup [values]="horizontalAnimationTypes" (selected)="toggleHorizontalAnimations($event)">
</igx-buttongroup>
</div>
<igx-input-group type="border">
<label igxLabel>Horizontal Animation Duration</label>
<input igxInput type="number" [(ngModel)]="animationDuration">
<igx-suffix>ms</igx-suffix>
</igx-input-group>
</div>
<igx-stepper #stepper [verticalAnimationSettings]="animationSettings" [horizontalAnimationType]="animationType"
[horizontalAnimationDuration]="animationDuration" (activeStepChanged)="activeChanged($event)"
[orientation]="'Horizontal'">
<igx-step [active]="true" #step (activeChange)="activeStepChange($event)">
<igx-icon igxStepIcon>done</igx-icon>
<label igxStepLabel>Step No 1</label>
<div>Test me daddy</div>
</igx-step>

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

<igx-step #step3 [disabled]="true">
<igx-step #step3 [disabled]="true" (activeChange)="activeStepChange($event)">
<igx-icon igxStepIcon>alarm</igx-icon>
<label igxStepLabel>Step No 3</label>
<igx-time-picker></igx-time-picker>
</igx-step>

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

<igx-step #step5>
<igx-step #step5 (activeChange)="activeStepChange($event)">
<igx-icon igxStepIcon>delete</igx-icon>
<label igxStepLabel>Step No 5</label>
<div>
<button igxButton>Click me</button>
</div>
</igx-step>
</igx-stepper>

<div class="sample-actions">
<!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
<!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
<!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
<button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
</div>

10 changes: 8 additions & 2 deletions src/app/stepper/stepper.sample.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
.sample-actions {
margin-top: 20px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 25px;
}

::ng-deep {
.igx-button-group {
width: 250px;
}
}
60 changes: 50 additions & 10 deletions src/app/stepper/stepper.sample.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { growVerIn, growVerOut, slideInLeft, slideOutRight } from 'igniteui-angular';
import { ToggleAnimationSettings } from 'projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component';
import { IgxStepperOrienatation } from 'projects/igniteui-angular/src/lib/stepper/common';
import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/igx-stepper.component';

Expand All @@ -8,6 +10,12 @@ import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/i
})
export class IgxStepperSampleComponent implements AfterViewInit {
@ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent;
public animationType = 'slide';
public animationSettings: ToggleAnimationSettings = {
openAnimation: growVerIn,
closeAnimation: growVerOut
};
public animationDuration = 320;
// public stepType = IgxStepType.Full;
// public labelPos = IgxStepperLabelPosition.Bottom;
// public stepTypes = [
Expand All @@ -25,26 +33,58 @@ export class IgxStepperSampleComponent implements AfterViewInit {
// { label: 'Start', labelPos: IgxStepperLabelPosition.Start,
// selected: this.labelPos === IgxStepperLabelPosition.Start, togglable: true }
// ];
public horizontalAnimationTypes = [];

public verticalAnimations = [];

constructor(private cdr: ChangeDetectorRef) {
this.horizontalAnimationTypes = [
{ label: 'slide', animationType: 'slide', selected: this.animationType === 'slide', togglable: true },
{ label: 'fade', animationType: 'fade', selected: this.animationType === 'fade', togglable: true },
{ label: 'none', animationType: 'none', selected: this.animationType === 'none', togglable: true }
];
this.verticalAnimations = [
{
label: 'default',
animationSettings: { openAnimation: growVerIn, closeAnimation: growVerOut },
selected: this.animationSettings.openAnimation === growVerIn,
togglable: true
},
{
label: 'custom',
animationSettings: { openAnimation: slideInLeft, closeAnimation: slideOutRight },
selected: this.animationSettings.openAnimation === slideOutRight,
togglable: true
}
];
}

public ngAfterViewInit() {
// requestAnimationFrame(() => {
// this.stepper.steps[1].completedStyle = IgxStepperProgressLine.Dashed;
// });
}

// public toggleStepTypes(event){
// this.stepType = this.stepTypes[event.index].stepType;
// }

public toggleHorizontalAnimations(event) {
this.animationType = this.horizontalAnimationTypes[event.index].animationType;
}

public toggleVerticalAnimations(event) {
this.animationSettings = this.verticalAnimations[event.index].animationSettings;
}
// public toggleLabelPos(event){
// this.labelPos = this.labelPositions[event.index].labelPos;
// }

public activeChanged(event, step) {
console.log('ACTIVE CHANGED');
console.log(event, step);

public activeChanged(event) {
console.log('GOLQM ACTIVE CHANGED');
// console.log(event);
}

public activeStepChanged(ev) {
console.log('ACTIVE STEP CHANGED');
console.log(ev);
public activeStepChange(ev) {
console.log('MALUK CHANGE', ev);
}

public activeStepChanging(ev) {
Expand Down

0 comments on commit 0174e71

Please sign in to comment.