mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
chore(build): fix demo compile errors, tslint errors
fix demo compile errors, tslint errors
This commit is contained in:
Dan Bucholtz
150
demos/src/loading/AppModule.ts
Normal file
150
demos/src/loading/AppModule.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import { Component, NgModule, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
import { IonicApp, IonicModule, LoadingController, NavController } from 'ionic-angular';
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
export class Page1 {
|
||||
constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
|
||||
|
||||
presentLoadingIos() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'ios',
|
||||
content: 'This is the "ios" spinner. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingDots() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'dots',
|
||||
content: 'This is the "dots" spinner. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingBubbles() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'bubbles',
|
||||
content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingCircles() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'circles',
|
||||
content: 'This is the "circles" spinner. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingCrescent() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'crescent',
|
||||
content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingDefault() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
content: 'This is the mode specific spinner. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingCustom() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'hide',
|
||||
content: `
|
||||
<div class="custom-spinner-container">
|
||||
<div class="custom-spinner-box"></div>
|
||||
</div>
|
||||
<div>This is a custom spinner. It will dismiss after 3 seconds.</div>`,
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
presentLoadingText() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
spinner: 'hide',
|
||||
content: 'This has no spinner, only text. It will dismiss after 3 seconds.',
|
||||
duration: 3000
|
||||
});
|
||||
|
||||
loading.present();
|
||||
}
|
||||
|
||||
goToPage2() {
|
||||
let loading = this.loadingCtrl.create({
|
||||
content: 'This will navigate to the next page and then dismiss after 3 seconds.'
|
||||
});
|
||||
|
||||
loading.present();
|
||||
|
||||
setTimeout(() => {
|
||||
this.navCtrl.push(Page2);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
loading.dismiss();
|
||||
}, 4000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>Page 2</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
<ion-content padding>This is another page!</ion-content>
|
||||
`
|
||||
})
|
||||
export class Page2 {}
|
||||
|
||||
|
||||
@Component({
|
||||
template: '<ion-nav [root]="root"></ion-nav>',
|
||||
styleUrls: ['styles.css'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ApiDemoApp {
|
||||
root = Page1;
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ApiDemoApp,
|
||||
Page1,
|
||||
Page2
|
||||
],
|
||||
imports: [
|
||||
IonicModule.forRoot(ApiDemoApp)
|
||||
],
|
||||
bootstrap: [IonicApp],
|
||||
entryComponents: [
|
||||
Page1,
|
||||
Page2
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
||||
68
demos/src/loading/main.html
Normal file
68
demos/src/loading/main.html
Normal file
@ -0,0 +1,68 @@
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>Loading</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<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>
|
||||
Show iOS
|
||||
</button>
|
||||
<button ion-item (click)="presentLoadingDots()">
|
||||
<ion-spinner item-left name="dots"></ion-spinner>
|
||||
Show Dots
|
||||
</button>
|
||||
<button ion-item (click)="presentLoadingBubbles()">
|
||||
<ion-spinner item-left name="bubbles"></ion-spinner>
|
||||
Show Bubbles
|
||||
</button>
|
||||
<button ion-item (click)="presentLoadingCircles()">
|
||||
<ion-spinner item-left name="circles"></ion-spinner>
|
||||
Show Circles
|
||||
</button>
|
||||
<button ion-item (click)="presentLoadingCrescent()">
|
||||
<ion-spinner item-left name="crescent"></ion-spinner>
|
||||
Show Crescent
|
||||
</button>
|
||||
<button ion-item (click)="presentLoadingDefault()">
|
||||
<ion-spinner item-left></ion-spinner>
|
||||
Show Default
|
||||
</button>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
Custom Loading Indicators
|
||||
</ion-list-header>
|
||||
<button ion-item (click)="presentLoadingCustom()">
|
||||
Show Custom
|
||||
</button>
|
||||
<button ion-item (click)="presentLoadingText()">
|
||||
Show Text Only
|
||||
</button>
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-footer>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right (click)="goToPage2()">
|
||||
Show Loading and Navigate
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
</ion-footer>
|
||||
59
demos/src/loading/styles.css
Normal file
59
demos/src/loading/styles.css
Normal file
@ -0,0 +1,59 @@
|
||||
.custom-spinner-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-spinner-box {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 3s infinite linear;
|
||||
}
|
||||
|
||||
.custom-spinner-box:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: pulse 1.5s infinite ease;
|
||||
}
|
||||
|
||||
.wp .custom-spinner-box,
|
||||
.wp .custom-spinner-box:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user