From e1e23bc1a28568a4b85cc52d444f66e36d34e806 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 19 Nov 2020 15:31:01 -0500 Subject: [PATCH] docs(modal): include note on using ion-page when wrapping modal component (#22534) --- core/src/components/modal/readme.md | 28 ++++++++++++------- core/src/components/modal/usage/angular.md | 2 ++ core/src/components/modal/usage/javascript.md | 2 ++ core/src/components/modal/usage/react.md | 2 ++ core/src/components/modal/usage/stencil.md | 2 ++ core/src/components/modal/usage/vue.md | 20 ++++++------- 6 files changed, 36 insertions(+), 20 deletions(-) diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 7df06e6982..9961776372 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -79,6 +79,8 @@ export class ModalPage { } ``` +> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. + ### Passing Data During creation of a modal, data can be passed in through the `componentProps`. @@ -251,6 +253,8 @@ function presentModal() { } ``` +> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. + ### Passing Data During creation of a modal, data can be passed in through the `componentProps`. The previous example can be written to include data: @@ -346,6 +350,8 @@ export const ModalExample: React.FC = () => { }; ``` +> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly. + ### Swipeable Modals Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped. @@ -467,6 +473,8 @@ export class PageModal { } ``` +> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. + ### Passing Data During creation of a modal, data can be passed in through the `componentProps`. @@ -578,16 +586,14 @@ async presentModal() { ```html ``` +> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly. + ## Properties diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md index e0c3852966..d25845365d 100644 --- a/core/src/components/modal/usage/angular.md +++ b/core/src/components/modal/usage/angular.md @@ -36,6 +36,8 @@ export class ModalPage { } ``` +> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. + ### Passing Data During creation of a modal, data can be passed in through the `componentProps`. diff --git a/core/src/components/modal/usage/javascript.md b/core/src/components/modal/usage/javascript.md index c985736c35..f85fe8cc80 100644 --- a/core/src/components/modal/usage/javascript.md +++ b/core/src/components/modal/usage/javascript.md @@ -31,6 +31,8 @@ function presentModal() { } ``` +> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. + ### Passing Data During creation of a modal, data can be passed in through the `componentProps`. The previous example can be written to include data: diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md index 01ed5c94a2..71926dc662 100644 --- a/core/src/components/modal/usage/react.md +++ b/core/src/components/modal/usage/react.md @@ -17,6 +17,8 @@ export const ModalExample: React.FC = () => { }; ``` +> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly. + ### Swipeable Modals Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped. diff --git a/core/src/components/modal/usage/stencil.md b/core/src/components/modal/usage/stencil.md index 4285c5f208..93bcdbe842 100644 --- a/core/src/components/modal/usage/stencil.md +++ b/core/src/components/modal/usage/stencil.md @@ -44,6 +44,8 @@ export class PageModal { } ``` +> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. + ### Passing Data During creation of a modal, data can be passed in through the `componentProps`. diff --git a/core/src/components/modal/usage/vue.md b/core/src/components/modal/usage/vue.md index 429086a808..4f7beefe06 100644 --- a/core/src/components/modal/usage/vue.md +++ b/core/src/components/modal/usage/vue.md @@ -1,15 +1,13 @@ ```html ``` + +> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly.