mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
docs(demos/modal): modal api demo
This commit is contained in:
Drew Rygh
2
demos/modal/app.html
Normal file
2
demos/modal/app.html
Normal file
@ -0,0 +1,2 @@
|
||||
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
|
||||
<ion-overlay></ion-overlay>
|
||||
@ -3,35 +3,32 @@ import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ion
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'app.html'
|
||||
})
|
||||
class ApiDemoApp {
|
||||
|
||||
constructor() {
|
||||
this.rootPage = ModalFirstPage;
|
||||
}
|
||||
}
|
||||
|
||||
@Page({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class MyAppCmp {
|
||||
|
||||
constructor(modal: Modal, app: IonicApp, config: Config, platform: Platform) {
|
||||
export class ModalFirstPage {
|
||||
constructor(modal: Modal) {
|
||||
this.modal = modal;
|
||||
|
||||
console.log('platforms', platform.platforms());
|
||||
console.log('mode', config.get('mode'));
|
||||
|
||||
console.log('core', platform.is('core'))
|
||||
console.log('cordova', platform.is('cordova'))
|
||||
console.log('mobile', platform.is('mobile'))
|
||||
console.log('ipad', platform.is('ipad'))
|
||||
console.log('iphone', platform.is('iphone'))
|
||||
console.log('phablet', platform.is('phablet'))
|
||||
console.log('tablet', platform.is('tablet'))
|
||||
console.log('ios', platform.is('ios'))
|
||||
console.log('android', platform.is('android'))
|
||||
console.log('windows phone', platform.is('windowsphone'))
|
||||
|
||||
platform.ready().then(() => {
|
||||
console.log('platform.ready')
|
||||
});
|
||||
|
||||
this.myParam = '';
|
||||
}
|
||||
|
||||
openModal() {
|
||||
this.modal.open(ContactModal, {
|
||||
openBasicModal() {
|
||||
this.modal.open(ModalContentPage);
|
||||
}
|
||||
openModalWithParams() {
|
||||
this.modal.open(ModalContentPage, { 'myParam': this.myParam });
|
||||
}
|
||||
openCustomAnimationModal() {
|
||||
this.modal.open(ModalContentPage, {}, {
|
||||
enterAnimation: 'my-fade-in',
|
||||
leaveAnimation: 'my-fade-out',
|
||||
handle: 'my-awesome-modal'
|
||||
@ -40,79 +37,26 @@ class MyAppCmp {
|
||||
}
|
||||
|
||||
@Page({
|
||||
template: '<ion-nav [root]="rootView"></ion-nav>'
|
||||
templateUrl: "modal-content.html"
|
||||
})
|
||||
export class ContactModal {
|
||||
constructor() {
|
||||
console.log('ContactModal constructor')
|
||||
this.rootView = ModalFirstPage;
|
||||
}
|
||||
onViewLoaded() {
|
||||
console.log('ContactModal onViewLoaded');
|
||||
}
|
||||
onViewWillEnter() {
|
||||
console.log('ContactModal onViewWillEnter');
|
||||
}
|
||||
onViewDidEnter() {
|
||||
console.log('ContactModal onViewDidEnter');
|
||||
}
|
||||
onViewWillLeave() {
|
||||
console.log('ContactModal onViewWillLeave');
|
||||
}
|
||||
onViewDidLeave() {
|
||||
console.log('ContactModal onViewDidLeave');
|
||||
}
|
||||
onViewWillUnload() {
|
||||
console.log('ContactModal onViewWillUnload');
|
||||
}
|
||||
onViewDidUnload() {
|
||||
console.log('ContactModal onViewDidUnload');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
|
||||
<ion-content padding>
|
||||
<p>
|
||||
<button (click)="push()">Push (Go to 2nd)</button>
|
||||
</p>
|
||||
<p>
|
||||
<button (click)="openActionSheet()">Open Action Sheet</button>
|
||||
</p>
|
||||
<p>
|
||||
<button (click)="closeByHandleModal()">Close By Handle</button>
|
||||
</p>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class ModalFirstPage {
|
||||
export class ModalContentPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
modal: Modal,
|
||||
actionSheet: ActionSheet
|
||||
actionSheet: ActionSheet,
|
||||
params: NavParams
|
||||
) {
|
||||
this.nav = nav;
|
||||
this.modal = modal;
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
|
||||
this.myParam = params.get('myParam');
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
let modal = this.modal.get();
|
||||
if (modal) {
|
||||
modal.close();
|
||||
}
|
||||
|
||||
closeByHandleModal() {
|
||||
debugger;
|
||||
let modal = this.modal.get('my-awesome-modal');
|
||||
modal.close();
|
||||
}
|
||||
|
||||
openActionSheet() {
|
||||
@ -132,7 +76,7 @@ export class ModalFirstPage {
|
||||
},
|
||||
buttonClicked: function(index) {
|
||||
console.log('Button clicked', index);
|
||||
if(index == 1) { return false; }
|
||||
if (index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
}).then(actionSheetRef => {
|
||||
@ -142,52 +86,27 @@ export class ModalFirstPage {
|
||||
}
|
||||
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
|
||||
<ion-content padding>
|
||||
<p>
|
||||
<button (click)="nav.pop()">Pop (Go back to 1st)</button>
|
||||
</p>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class ModalSecondPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
params: NavParams
|
||||
) {
|
||||
this.nav = nav;
|
||||
this.params = params;
|
||||
|
||||
console.log('Second page params:', params);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
class FadeIn extends Animation {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
constructor(enteringView, leavingView) {
|
||||
super(enteringView.pageRef());
|
||||
this
|
||||
.easing('ease')
|
||||
.duration(450)
|
||||
.fadeIn();
|
||||
.duration(1000)
|
||||
.fromTo('translateY', '0%', '0%')
|
||||
.fadeIn()
|
||||
.before.addClass('show-page');
|
||||
}
|
||||
}
|
||||
|
||||
Animation.register('my-fade-in', FadeIn);
|
||||
|
||||
class FadeOut extends Animation {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
constructor(enteringView, leavingView) {
|
||||
super(leavingView.pageRef());
|
||||
this
|
||||
.easing('ease')
|
||||
.duration(250)
|
||||
.fadeOut();
|
||||
.duration(500)
|
||||
.fadeOut()
|
||||
.before.addClass('show-page');
|
||||
}
|
||||
}
|
||||
|
||||
Animation.register('my-fade-out', FadeOut);
|
||||
|
||||
@ -3,7 +3,21 @@
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding>
|
||||
<button (click)="openModal()">Open Modal</button>
|
||||
<ion-row>
|
||||
<button secondary clear (click)="openBasicModal()">Open Basic Modal</button>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<button secondary (click)="openModalWithParams()">Pass Params</button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-input floating-label style="margin-top: -10px">
|
||||
<ion-label>Params</ion-label>
|
||||
<input [(ng-model)]="myParam" type="text" value="">
|
||||
</ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-content>
|
||||
|
||||
<ion-overlay></ion-overlay>
|
||||
|
||||
8
demos/modal/modal-content.html
Normal file
8
demos/modal/modal-content.html
Normal file
@ -0,0 +1,8 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Modals</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding>
|
||||
<div [class.hide]="!myParam">Parameters entered: {{myParam}}</div>
|
||||
<button danger full (click)="closeModal()">Close Modal</button>
|
||||
</ion-content>
|
||||
@ -33,6 +33,7 @@ import {extend} from 'ionic/util';
|
||||
*
|
||||
* }
|
||||
* ```
|
||||
* @demo /docs/v2/demos/modal/
|
||||
* @see {@link /docs/v2/components#modals Modal Component Docs}
|
||||
*/
|
||||
@Injectable()
|
||||
|
||||
Reference in New Issue
Block a user