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

docs(demos): update modal demo

Browse Source
This commit is contained in:
Drew Rygh
2016-01-11 14:21:50 -06:00
parent f23651e126
commit 38b44f027e
2 changed files with 19 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
demos/modal/index.ts
View File

@ -1,5 +1,5 @@
import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic'; import {App, Page, IonicApp, Config, Platform, ViewController} from 'ionic/ionic';
import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic'; import {Modal, NavController, NavParams, Animation} from 'ionic/ionic';
@App({ @App({
@ -16,23 +16,24 @@ class ApiDemoApp {
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
export class ModalFirstPage { export class ModalFirstPage {
constructor(modal: Modal) { constructor(nav: NavController) {
this.modal = modal; this.nav = nav;
this.myParam = ''; this.myParam = '';
} }
openBasicModal() { openBasicModal() {
this.modal.open(ModalContentPage); let myModal = Modal.create(ModalContentPage);
this.nav.present(myModal);
} }
openModalWithParams() { openModalWithParams() {
this.modal.open(ModalContentPage, { 'myParam': this.myParam }); let myModal = Modal.create(ModalContentPage, { 'myParam': this.myParam });
this.nav.present(myModal);
} }
openCustomAnimationModal() { openCustomAnimationModal() {
this.modal.open(ModalContentPage, {}, { let myModal = Modal.create(ModalContentPage, {
enterAnimation: 'my-fade-in', animation: 'my-fade-in',
leaveAnimation: 'my-fade-out',
handle: 'my-awesome-modal'
}); });
this.nav.present(myModal);
} }
} }
@ -42,46 +43,16 @@ export class ModalFirstPage {
export class ModalContentPage { export class ModalContentPage {
constructor( constructor(
nav: NavController, nav: NavController,
modal: Modal, params: NavParams,
actionSheet: ActionSheet, viewCtrl: ViewController
params: NavParams
) { ) {
this.nav = nav; this.nav = nav;
this.modal = modal; this.viewCtrl = viewCtrl;
this.actionSheet = actionSheet;
this.myParam = params.get('myParam'); this.myParam = params.get('myParam');
} }
closeModal() { closeModal() {
let modal = this.modal.get(); this.viewCtrl.dismiss();
if (modal) {
modal.close();
}
}
openActionSheet() {
this.actionSheet.open({
buttons: [
{ text: 'Share This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
console.log('Canceled');
},
destructiveButtonClicked: () => {
console.log('Destructive clicked');
},
buttonClicked: function(index) {
console.log('Button clicked', index);
if (index == 1) { return false; }
return true;
}
}).then(actionSheetRef => {
this.actionSheetRef = actionSheetRef;
});
} }
} }

6
demos/modal/main.html
View File

@ -6,9 +6,11 @@
<ion-row> <ion-row>
<button secondary clear (click)="openBasicModal()">Open Basic Modal</button> <button secondary clear (click)="openBasicModal()">Open Basic Modal</button>
</ion-row> </ion-row>
<ion-row>
<!-- <ion-row>
<button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button> <button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button>
</ion-row> </ion-row> -->
<ion-row> <ion-row>
<ion-col> <ion-col>
<button secondary (click)="openModalWithParams()">Pass Params</button> <button secondary (click)="openModalWithParams()">Pass Params</button>