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

chore(demos): update demos to work

Browse Source 
* chore(demos): WIP refactor gulp demos task to use SystemJS

move build files into dist/demos and comment out the AoT demos task for
right now. This makes both `gulp demos` and `gulp demos.watch`work
again.

references #8411

* docs(demos): fix infinite scroll demo

* chore(demos): move old demos task to demos.prod

update the demos file with shared tasks, include the shared css

* docs(demos): fix API demos to use correct styles

* chore(demos): remove the main.ts files from each demo

* chore(demos): add prod template and constant

* chore(demos): remove tsconfig and package from demos

* chore(demos): update app.module path to ionic

* chore(demos): update app.module path to ionic

* chore(demos): update prod task for demos to work with AoT

also puts the demo build files into dist/ instead of the src directory

* docs(demos): update deploy and docs tasks for new build

* docs(scripts): update demos README

* chore(demos): fix path for prod build
This commit is contained in:
Brandy Carney
2016-12-13 13:56:22 -05:00
committed by Adam Bradley
parent 3701ee5e37
commit 1f83cde78b
182 changed files with 2946 additions and 3626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
demos/src/loading/app.component.ts
View File

@ -1,130 +0,0 @@
import { Component } from '@angular/core';
import { LoadingController, NavController } from 'ionic-angular';
@Component({
templateUrl: 'page.html',
styleUrls: ['style.css']
})
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>'
})
export class ApiDemoApp {
root = Page1;
}

134
demos/src/loading/app.module.ts
View File

@ -1,6 +1,134 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, Page1, Page2 } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, LoadingController, NavController } from '../';
@Component({
templateUrl: 'page.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="loading-custom-spinner-container">
<div class="loading-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>'
})
export class ApiDemoApp {
root = Page1;
}
@NgModule({
declarations: [

18
demos/src/loading/index.html
View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Demo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="../../css/ionic.min.css" rel="stylesheet">
<link href="../scrollbar-fix.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<script src="../../polyfills/polyfills.js"></script>
<script src="../scrollbar-fix.js"></script>
<script src="./main.bundle.js"></script>
</body>
</html>

6
demos/src/loading/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

59
demos/src/loading/style.css
View File

@ -1,59 +0,0 @@
.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);
}
}