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

docs(demos): update loading indicator demo and e2e

Browse Source 
references #5426
This commit is contained in:
Brandy Carney
2016-04-04 23:25:42 -04:00
parent aba7c155f9
commit f096cf656f
3 changed files with 127 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
demos/loading/main.html
View File

@ -2,15 +2,49 @@
<ion-title>Loading</ion-title>
</ion-toolbar>
<ion-content padding>
<button block (click)="presentLoadingIos()">iOS Spinner</button>
<button block (click)="presentLoadingDots()">Dots Spinner</button>
<button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
<button block (click)="presentLoadingCircles()">Circles Spinner</button>
<button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
<button block (click)="presentLoadingDefault()" secondary>Default Spinner</button>
<button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
<button block (click)="presentLoadingText()" dark>Content Only</button>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<button ion-item (click)="presentLoadingIos()">
<ion-spinner item-left name="ios"></ion-spinner>
Preview iOS
</button>
<button ion-item (click)="presentLoadingDots()">
<ion-spinner item-left name="dots"></ion-spinner>
Preview Dots
</button>
<button ion-item (click)="presentLoadingBubbles()">
<ion-spinner item-left name="bubbles"></ion-spinner>
Preview Bubbles
</button>
<button ion-item (click)="presentLoadingCircles()">
<ion-spinner item-left name="circles"></ion-spinner>
Preview Circles
</button>
<button ion-item (click)="presentLoadingCrescent()">
<ion-spinner item-left name="crescent"></ion-spinner>
Preview Crescent
</button>
<button ion-item (click)="presentLoadingDefault()">
<ion-spinner item-left></ion-spinner>
Preview Default
</button>
</ion-list>
<ion-list>
<ion-list-header>
Custom Loading Indicators
</ion-list-header>
<button ion-item (click)="presentLoadingCustom()">
Preview Custom
</button>
<button ion-item (click)="presentLoadingText()">
Preview Text Only
</button>
</ion-list>
</ion-content>
<ion-toolbar position="bottom">

86
ionic/components/loading/test/basic/index.ts
View File

@ -10,7 +10,7 @@ class E2EPage {
presentLoadingIos() {
let loading = Loading.create({
spinner: 'ios',
duration: 2000
duration: 1000
});
this.nav.present(loading);
@ -20,7 +20,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'dots',
content: 'Loading...',
duration: 2000
duration: 1000
});
this.nav.present(loading);
@ -30,7 +30,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'bubbles',
content: 'Loading...',
duration: 2000
duration: 1000
});
this.nav.present(loading);
@ -40,7 +40,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'circles',
content: 'Loading...',
duration: 2000
duration: 1000
});
this.nav.present(loading);
@ -50,7 +50,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'crescent',
content: 'Please wait...',
duration: 1500
duration: 1000
});
this.nav.present(loading);
@ -75,7 +75,7 @@ class E2EPage {
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
duration: 2000
duration: 1000
});
this.nav.present(loading);
@ -101,6 +101,80 @@ class E2EPage {
goToPage2() {
this.nav.push(Page2);
}
presentLoadingMultiple() {
let loading = Loading.create({
spinner: 'hide',
content: 'Loading 1 Please Wait...'
});
this.nav.present(loading);
let loading2 = Loading.create({
spinner: 'hide',
content: 'Loading 2 Please Wait...'
});
setTimeout(() => {
this.nav.present(loading2);
}, 1000);
let loading3 = Loading.create({
spinner: 'hide',
content: 'Loading 3 Please Wait...'
});
setTimeout(() => {
this.nav.present(loading3);
setTimeout(() => {
loading3.dismiss();
}, 1000);
setTimeout(() => {
loading2.dismiss();
}, 2000);
setTimeout(() => {
loading.dismiss();
}, 3000);
}, 2000);
}
presentLoadingMultipleNav() {
let loading = Loading.create({
spinner: 'hide',
content: 'Loading 1 Please Wait...',
dismissOnPageChange: true
});
this.nav.present(loading);
let loading2 = Loading.create({
spinner: 'hide',
content: 'Loading 2 Please Wait...',
dismissOnPageChange: true
});
setTimeout(() => {
this.nav.present(loading2);
}, 500);
let loading3 = Loading.create({
spinner: 'hide',
content: 'Loading 3 Please Wait...',
dismissOnPageChange: true
});
setTimeout(() => {
this.nav.present(loading3);
setTimeout(() => {
this.nav.push(Page2);
}, 1000);
}, 1000);
}
}
@Page({

6
ionic/components/loading/test/basic/main.html
View File

@ -8,10 +8,12 @@
<button block (click)="presentLoadingDots()">Dots Spinner</button>
<button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
<button block (click)="presentLoadingCircles()">Circles Spinner</button>
<button block (click)="presentLoadingCrescent()">Crescent Spinner 1500 Duration</button>
<button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
<button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
<button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
<button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
<button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
<button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
<button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
</ion-content>
<ion-toolbar position="bottom">