From dfbb5b6e6eeee1873ee89789aae6bc92dce3da93 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 18 Dec 2018 16:39:15 +0100 Subject: [PATCH] docs(modal): add docs for params --- core/src/components/modal/readme.md | 109 ++++++++++++++---- core/src/components/modal/usage/angular.md | 19 +++ core/src/components/modal/usage/javascript.md | 45 ++++---- 3 files changed, 127 insertions(+), 46 deletions(-) diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index d266956fb7..63886f7e89 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -8,6 +8,51 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis Modals can be created using a [Modal Controller](../../modal-controller/ModalController). They can be customized by passing modal options in the modal controller's create method. +### Passing paramaters + +When a modal is created, paramaters might be passed to the newly created modal: + +```ts +// Create a modal using MyModalComponent with some initial data +const modal = await modalController.create({ + component: MyModalComponent, + componentProps: { + 'prop1': value, + 'prop2': value2 + } +}); +``` + +Under the hood, the controller creates a new `ion-modal` and attaches the specified component to it. +It also assigns the specified `componentProps` to the component's instance: + +```js +// pseudo-code +const instance = create(MyModalComponent); +instance.prop1 = value; +instance.prop2 = value2; +``` + +This way, your component can access the passed params, check the "Usage" section for further code example for each frameworks. + + +### Retuning data + +Modals can also return data back to the controller when they are dismissed. + +```js +const modal = await modalController.create({...}); +const { data } = await modal.onDidDismiss(); +console.log(data); +``` + +```js +// Dismiss the top modal returning some data object +modalController.dismiss({ + 'result': value +}) +``` + @@ -38,41 +83,59 @@ export class ModalExample { } ``` +```typescript +import { Component } from '@angular/core'; +import { NavParams } from '@ionic/angular'; + +@Component({ + selector: 'modal-page', +}) +export class ModalExample { + + // "value" passed in componentProps + @Input() value: number; + + constructor(navParams: NavParams) { + // componentProps can also be accessed at construction time using NavParams + } + +} +``` + ### Javascript +```html + + + +``` + ```javascript +customElements.define('modal-page', class extends HTMLElement { + connectedCallback() { + this.innerHTML = ` + + + Super Modal + + + + Content +`; + } +}); + async function presentModal() { // initialize controller const modalController = document.querySelector('ion-modal-controller'); await modalController.componentOnReady(); - // create component to open - const element = document.createElement('div'); - element.innerHTML = ` - <ion-header> - <ion-toolbar> - <ion-title>Super Modal</ion-title> - </ion-toolbar> - </ion-header> - <ion-content> - <h1>Content of doom</h1> - <div>Here's some more content</div> - <ion-button class="dismiss">Dismiss Modal</ion-button> - </ion-content> - `; - - // listen for close event - const button = element.querySelector('ion-button'); - button.addEventListener('click', () => { - modalController.dismiss(); - }); - // present the modal const modalElement = await modalController.create({ - component: element + component: 'modal-page' }); - modalElement.present(); + await modalElement.present(); } ``` diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md index f079c7e622..9c64048f44 100644 --- a/core/src/components/modal/usage/angular.md +++ b/core/src/components/modal/usage/angular.md @@ -19,3 +19,22 @@ export class ModalExample { } } ``` + +```typescript +import { Component } from '@angular/core'; +import { NavParams } from '@ionic/angular'; + +@Component({ + selector: 'modal-page', +}) +export class ModalExample { + + // "value" passed in componentProps + @Input() value: number; + + constructor(navParams: NavParams) { + // componentProps can also be accessed at construction time using NavParams + } + +} +``` diff --git a/core/src/components/modal/usage/javascript.md b/core/src/components/modal/usage/javascript.md index d17264158a..01cbd160b0 100644 --- a/core/src/components/modal/usage/javascript.md +++ b/core/src/components/modal/usage/javascript.md @@ -1,34 +1,33 @@ +```html + + + +``` + ```javascript +customElements.define('modal-page', class extends HTMLElement { + connectedCallback() { + this.innerHTML = ` + + + Super Modal + + + + Content +`; + } +}); + async function presentModal() { // initialize controller const modalController = document.querySelector('ion-modal-controller'); await modalController.componentOnReady(); - // create component to open - const element = document.createElement('div'); - element.innerHTML = ` - <ion-header> - <ion-toolbar> - <ion-title>Super Modal</ion-title> - </ion-toolbar> - </ion-header> - <ion-content> - <h1>Content of doom</h1> - <div>Here's some more content</div> - <ion-button class="dismiss">Dismiss Modal</ion-button> - </ion-content> - `; - - // listen for close event - const button = element.querySelector('ion-button'); - button.addEventListener('click', () => { - modalController.dismiss(); - }); - // present the modal const modalElement = await modalController.create({ - component: element + component: 'modal-page' }); - modalElement.present(); + await modalElement.present(); } ```