javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(slides): update slides tests with new API and add new one

Browse Source 
references #5508
This commit is contained in:
Brandy Carney
2016-04-19 17:34:51 -04:00
parent 20feed0cc8
commit 381a650f8e
5 changed files with 75 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
ionic/components/slides/test/controller/index.ts Normal file
View File

@ -0,0 +1,52 @@
import {ViewChild} from 'angular2/core';
import {App, Slides} from 'ionic-angular';
@App({
templateUrl: 'main.html'
})
class MyApp {
mySlideOptions: any;
@ViewChild(Slides) slider: Slides;
constructor() {
console.log("here");
this.mySlideOptions = {
initialSlide: 1,
autoplay: 1000
};
}
ngAfterViewInit() {
}
onSlideChanged() {
console.log("Slide Changed");
let isEnd = this.slider.isEnd();
console.log("This is the last slide?", isEnd);
}
goToPrevSlide() {
this.slider.slidePrev(5000, false);
}
goToNextSlide() {
this.slider.slideNext();
}
goToSlide(index) {
console.log(index);
this.slider.slideTo(index, 500, false);
}
getIndex() {
let index = this.slider.getActiveIndex();
console.log("Current Index is", index);
}
getLength() {
let length = this.slider.length();
console.log("Current Length is", length);
}
}

16
ionic/components/slides/test/controller/main.html Normal file
View File

@ -0,0 +1,16 @@
<ion-slides [options]="mySlideOptions" (didChange)="onSlideChanged()">
<ion-slide padding>
<p>Slide 1</p>
<button block (click)="goToSlide(3)">Navigate to 3rd Slide</button>
<button block (click)="getLength()">Get Slide Length</button>
</ion-slide>
<ion-slide padding>
<p>Slide 2</p>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
</ion-slide>
<ion-slide padding>
<p>Slide 3</p>
<button block (click)="getIndex()">Get Index</button>
</ion-slide>
</ion-slides>

2
ionic/components/slides/test/intro/main.html
View File

@ -8,7 +8,7 @@
</ion-navbar>
<ion-content>
<ion-slides pager [options]="mySlideOptions" (change)="onSlideChanged($event)" (slideChangeStart)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
<ion-slides pager [options]="mySlideOptions" (didChange)="onSlideChanged($event)" (willChange)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">

5
ionic/components/slides/test/loop/index.ts
View File

@ -35,7 +35,10 @@ class MyApp {
onSlideChanged(slider: Slides) {
console.log('Slide changed', slider);
console.log("active index", slider.activeIndex);
}
ngAfterViewInit() {
console.log(this.loopSlider);
}
}

4
ionic/components/slides/test/loop/main.html
View File

@ -1,5 +1,5 @@
<div class="slides-div">
<ion-slides [options]="myTopSlideOptions" #loopSlider (change)="onSlideChanged($event)" pager>
<ion-slides [options]="myTopSlideOptions" #loopSlider (didChange)="onSlideChanged($event)" pager>
<ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
Loop {{ slide.name }}
</ion-slide>
@ -8,7 +8,7 @@
<div class="slides-div">
<ion-slides (change)="onSlideChanged($event)" pager>
<ion-slides (didChange)="onSlideChanged($event)" pager>
<ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
Don't Loop {{ slide.name }}
</ion-slide>