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

demo(overlay): use injectable overlay controllers

Browse Source
This commit is contained in:
Adam Bradley
2016-06-28 20:46:43 -05:00
parent 7aa559aec2
commit 3fb58d95c3
8 changed files with 82 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/action-sheet/index.ts
View File

@ -1,16 +1,16 @@
import { Component } from '@angular/core';
import { ActionSheet, ionicBootstrap, NavController, Platform } from 'ionic-angular';
import { ActionSheetController, ionicBootstrap, Platform } from 'ionic-angular';
@Component({
templateUrl: 'main.html'
})
export class ApiDemoPage {
constructor(public nav: NavController, public platform: Platform) { }
constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
present() {
let actionSheet = ActionSheet.create({
let actionSheet = this.alertCtrl.create({
title: 'Albums',
buttons: [
{
@ -53,7 +53,7 @@ export class ApiDemoPage {
]
});
this.nav.present(actionSheet);
actionSheet.present();
}
}

32
demos/alert/index.ts
View File

@ -1,6 +1,6 @@
import { Component } from '@angular/core';
import { Alert, ionicBootstrap, NavController } from 'ionic-angular';
import { AlertController, ionicBootstrap } from 'ionic-angular';
@Component({
@ -12,20 +12,20 @@ export class ApiDemoPage {
testCheckboxOpen = false;
testCheckboxResult: any;
constructor(public nav: NavController) {}
constructor(public alertCtrl: AlertController) {}
doAlert() {
let alert = Alert.create({
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
alert.present();
}
doConfirm() {
let alert = Alert.create({
let alert = this.alertCtrl.create({
title: 'Use this lightsaber?',
body: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
@ -44,11 +44,11 @@ export class ApiDemoPage {
]
});
this.nav.present(alert);
alert.present();
}
doPrompt() {
let alert = Alert.create({
let alert = this.alertCtrl.create({
title: 'Login',
body: "Enter a name for this new album you're so keen on adding",
inputs: [
@ -60,24 +60,24 @@ export class ApiDemoPage {
buttons: [
{
text: 'Cancel',
handler: data => {
handler: (data: any) => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: data => {
handler: (data: any) => {
console.log('Saved clicked');
}
}
]
});
this.nav.present(alert);
alert.present();
}
doRadio() {
let alert = Alert.create();
let alert = this.alertCtrl.create();
alert.setTitle('Lightsaber color');
alert.addInput({
@ -126,18 +126,18 @@ export class ApiDemoPage {
alert.addButton('Cancel');
alert.addButton({
text: 'Ok',
handler: data => {
handler: (data: any) => {
console.log('Radio data:', data);
this.testRadioOpen = false;
this.testRadioResult = data;
}
});
this.nav.present(alert);
alert.present();
}
doCheckbox() {
let alert = Alert.create();
let alert = this.alertCtrl.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
@ -198,14 +198,14 @@ export class ApiDemoPage {
alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: data => {
handler: (data: any) => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
});
this.nav.present(alert);
alert.present();
}
}

8
demos/item-sliding/index.ts
View File

@ -1,6 +1,6 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { ionicBootstrap, ItemSliding, NavController, Toast } from 'ionic-angular';
import { ionicBootstrap, ItemSliding, ToastController } from 'ionic-angular';
@Component({
@ -13,7 +13,7 @@ class ApiDemoPage {
editButton: string = 'Edit';
editing: boolean = false;
constructor(private nav: NavController) {
constructor(private toastCtrl: ToastController) {
this.chats = [
{
img: './avatar-cher.png',
@ -116,10 +116,10 @@ class ApiDemoPage {
download(item: ItemSliding) {
item.setClass('downloading', true);
setTimeout(() => {
const toast = Toast.create({
const toast = this.toastCtrl.create({
message: 'Item was downloaded!'
});
this.nav.present(toast);
toast.present();
item.setClass('downloading', false);
item.close();

46
demos/loading/index.ts
View File

@ -1,75 +1,75 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { ionicBootstrap, Loading, NavController, Platform } from 'ionic-angular';
import { ionicBootstrap, LoadingController, NavController } from 'ionic-angular';
@Component({
templateUrl: 'main.html'
})
class Page1 {
constructor(private nav: NavController, private platform: Platform) {}
constructor(private loadingCtrl: LoadingController, private nav: NavController) {}
presentLoadingIos() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'ios',
content: 'This is the "ios" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingDots() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'dots',
content: 'This is the "dots" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingBubbles() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'bubbles',
content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingCircles() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'circles',
content: 'This is the "circles" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingCrescent() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'crescent',
content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingDefault() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
content: 'This is the mode specific spinner. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingCustom() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
@ -79,25 +79,25 @@ class Page1 {
duration: 3000
});
this.nav.present(loading);
loading.present();
}
presentLoadingText() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: 'This has no spinner, only text. It will dismiss after 3 seconds.',
duration: 3000
});
this.nav.present(loading);
loading.present();
}
goToPage2() {
let loading = Loading.create({
let loading = this.loadingCtrl.create({
content: 'This will navigate to the next page and then dismiss after 3 seconds.'
});
this.nav.present(loading);
loading.present();
setTimeout(() => {
this.nav.push(Page2);
@ -109,6 +109,7 @@ class Page1 {
}
}
@Component({
template: `
<ion-header>
@ -119,9 +120,8 @@ class Page1 {
<ion-content padding>This is another page!</ion-content>
`
})
class Page2 {
constructor(private nav: NavController, private platform: Platform) {}
}
class Page2 {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>',

26
demos/modal/index.ts
View File

@ -1,6 +1,6 @@
import { Component } from '@angular/core';
import { Animation, Config, IonicApp, ionicBootstrap, Modal, NavController, NavParams, Platform, ViewController } from 'ionic-angular';
import { Animation, ionicBootstrap, ModalController, NavController, NavParams, ViewController } from 'ionic-angular';
@Component({
@ -9,21 +9,21 @@ import { Animation, Config, IonicApp, ionicBootstrap, Modal, NavController, NavP
export class ModalFirstPage {
myParam = '';
constructor(public nav: NavController) {}
constructor(public modalCtrl: ModalController) {}
openBasicModal() {
let myModal = Modal.create(ModalContentPage);
this.nav.present(myModal);
let myModal = this.modalCtrl.create(ModalContentPage);
myModal.present();
}
openModalWithParams() {
let myModal = Modal.create(ModalContentPage, { 'myParam': this.myParam });
this.nav.present(myModal);
let myModal = this.modalCtrl.create(ModalContentPage, { 'myParam': this.myParam });
myModal.present();
}
openCustomAnimationModal() {
let myModal = Modal.create(ModalContentPage, {
let myModal = this.modalCtrl.create(ModalContentPage, {
animation: 'my-fade-in',
});
this.nav.present(myModal);
myModal.present();
}
}
@ -39,7 +39,7 @@ export class ModalContentPage {
public viewCtrl: ViewController,
params: NavParams
) {
this.myParam = params.get('myParam');
this.myParam = params.get('myParam');
}
dismiss() {
@ -59,25 +59,25 @@ ionicBootstrap(ApiDemoApp);
class FadeIn extends Animation {
constructor(enteringView, leavingView) {
constructor(enteringView: ViewController, leavingView: ViewController) {
super(enteringView.pageRef());
this
.easing('ease')
.duration(1000)
.fromTo('translateY', '0%', '0%')
.fadeIn()
.fromTo('opacity', 0, 1)
.before.addClass('show-page');
}
}
Animation.register('my-fade-in', FadeIn);
class FadeOut extends Animation {
constructor(enteringView, leavingView) {
constructor(enteringView: ViewController, leavingView: ViewController) {
super(leavingView.pageRef());
this
.easing('ease')
.duration(500)
.fadeOut()
.fromTo('opacity', 1, 0)
.before.addClass('show-page');
}
}

22
demos/popover/index.ts
View File

@ -1,6 +1,6 @@
import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { Content, ionicBootstrap, NavController, NavParams, Popover } from 'ionic-angular';
import { ionicBootstrap, NavParams, PopoverController } from 'ionic-angular';
@Component({
@ -63,9 +63,9 @@ class PopoverRadioPage {
background: string;
contentEle: any;
textEle: any;
fontFamily;
fontFamily: string;
colors = {
colors: any = {
'white': {
'bg': 'rgb(255, 255, 255)',
'fg': 'rgb(0, 0, 0)'
@ -98,7 +98,7 @@ class PopoverRadioPage {
}
}
getColorName(background) {
getColorName(background: any) {
let colorName = 'white';
if (!background) return 'white';
@ -118,13 +118,13 @@ class PopoverRadioPage {
}
}
changeBackground(color) {
changeBackground(color: any) {
this.background = color;
this.contentEle.style.backgroundColor = this.colors[color].bg;
this.textEle.style.color = this.colors[color].fg;
}
changeFontSize(direction) {
changeFontSize(direction: string) {
this.textEle.style.fontSize = direction;
}
@ -141,17 +141,15 @@ class ApiDemoPage {
@ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
@ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
constructor(private nav: NavController) {
constructor(private popoverCtrl: PopoverController) {}
}
presentRadioPopover(ev) {
let popover = Popover.create(PopoverRadioPage, {
presentRadioPopover(ev: UIEvent) {
let popover = this.popoverCtrl.create(PopoverRadioPage, {
contentEle: this.content.nativeElement,
textEle: this.text.nativeElement
});
this.nav.present(popover, {
popover.present({
ev: ev
});
}

22
demos/toast/index.ts
View File

@ -1,55 +1,55 @@
import { Component } from '@angular/core';
import { ionicBootstrap, NavController, Toast } from 'ionic-angular';
import { ionicBootstrap, ToastController } from 'ionic-angular';
@Component({
templateUrl: 'main.html'
})
class ApiDemoPage {
constructor(private nav: NavController) { }
constructor(private toastCtrl: ToastController) { }
showToast(position: string) {
const toast = Toast.create({
const toast = this.toastCtrl.create({
message: 'User was created successfully',
position: position,
duration: 3000
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
toast.present();
}
showLongToast() {
const toast = Toast.create({
const toast = this.toastCtrl.create({
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
duration: 3000
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
toast.present();
}
showDismissDurationToast() {
const toast = Toast.create({
const toast = this.toastCtrl.create({
message: 'I am dismissed after 1.5 seconds',
duration: 1500
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
toast.present();
}
showToastWithCloseButton() {
const toast = Toast.create({
const toast = this.toastCtrl.create({
message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.',
showCloseButton: true,
closeButtonText: 'Ok'
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
toast.present();
}
private dismissHandler(toast: Toast) {
private dismissHandler() {
console.info('Toast onDismiss()');
}

2
src/components/nav/nav-controller.ts
View File

@ -448,7 +448,7 @@ export class NavController extends Ion {
private present(enteringView: ViewController, opts?: NavOptions): Promise<any> {
// deprecated warning: added beta.11 2016-06-27
console.warn('nav.present() has been deprecated.\n' +
'Please use inject the overlays controller and use the present method on the instance instead.');
'Please inject the overlay\'s controller and use the present method on the instance instead.');
return Promise.resolve();
}