diff --git a/demos/modal/app.html b/demos/modal/app.html
new file mode 100644
index 0000000000..5f6bb33d68
--- /dev/null
+++ b/demos/modal/app.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/demos/modal/index.ts b/demos/modal/index.ts
index 9603703f0e..1a7dc97174 100644
--- a/demos/modal/index.ts
+++ b/demos/modal/index.ts
@@ -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,154 +37,76 @@ class MyAppCmp {
}
@Page({
- template: ''
+ 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');
- }
-}
+export class ModalContentPage {
+ constructor(
+ nav: NavController,
+ modal: Modal,
+ actionSheet: ActionSheet,
+ params: NavParams
+ ) {
+ this.nav = nav;
+ this.modal = modal;
+ this.actionSheet = actionSheet;
+ this.myParam = params.get('myParam');
+ }
-
-@Page({
- template: `
- First Page Header
-
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class ModalFirstPage {
- constructor(
- nav: NavController,
- modal: Modal,
- actionSheet: ActionSheet
- ) {
- this.nav = nav;
- this.modal = modal;
- this.actionSheet = actionSheet;
- }
-
- push() {
- this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
- }
-
- closeModal() {
- let modal = this.modal.get();
- modal.close();
- }
-
- closeByHandleModal() {
- debugger;
- let modal = this.modal.get('my-awesome-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;
+ closeModal() {
+ let modal = this.modal.get();
+ if (modal) {
+ modal.close();
}
- }).then(actionSheetRef => {
- this.actionSheetRef = actionSheetRef;
- });
- }
-}
-
-
-@Page({
- template: `
- Second Page Header
-
-
-
-
-
-
-
- `
-})
-export class ModalSecondPage {
- constructor(
- nav: NavController,
- params: NavParams
- ) {
- this.nav = nav;
- this.params = params;
-
- console.log('Second page params:', params);
- }
+ }
+ 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;
+ });
+ }
}
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);
diff --git a/demos/modal/main.html b/demos/modal/main.html
index 4bd4fe9ff6..6a0e8bd348 100644
--- a/demos/modal/main.html
+++ b/demos/modal/main.html
@@ -3,7 +3,21 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+ Params
+
+
+
+
-
-
diff --git a/demos/modal/modal-content.html b/demos/modal/modal-content.html
new file mode 100644
index 0000000000..74fdea736d
--- /dev/null
+++ b/demos/modal/modal-content.html
@@ -0,0 +1,8 @@
+
+ Modals
+
+
+
+ Parameters entered: {{myParam}}
+
+
diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts
index 604966fe81..83f611447f 100644
--- a/ionic/components/modal/modal.ts
+++ b/ionic/components/modal/modal.ts
@@ -33,6 +33,7 @@ import {extend} from 'ionic/util';
*
* }
* ```
+ * @demo /docs/v2/demos/modal/
* @see {@link /docs/v2/components#modals Modal Component Docs}
*/
@Injectable()