javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(modal): include note on using ion-page when wrapping modal component (#22534)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-11-19 15:31:01 -05:00
committed by GitHub
parent cdc2fb652f
commit e1e23bc1a2
6 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
core/src/components/modal/readme.md
View File

@ -79,6 +79,8 @@ export class ModalPage {
}
```
> If you need a wrapper element inside of your modal component, we recommend using a `<div class="ion-page">` 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 `<div class="ion-page">` 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 `<IonPage>` 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 `<div class="ion-page">` 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
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
{{ content }}
</ion-content>
</div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
{{ content }}
</ion-content>
</template>
<script>
@ -672,6 +678,8 @@ export default defineComponent({
</script>
```
> If you need a wrapper element inside of your modal component, we recommend using an `<ion-page>` so that the component dimensions are still computed properly.
## Properties

2
core/src/components/modal/usage/angular.md
View File

@ -36,6 +36,8 @@ export class ModalPage {
}
```
> If you need a wrapper element inside of your modal component, we recommend using a `<div class="ion-page">` so that the component dimensions are still computed properly.
### Passing Data
During creation of a modal, data can be passed in through the `componentProps`.

2
core/src/components/modal/usage/javascript.md
View File

@ -31,6 +31,8 @@ function presentModal() {
}
```
> If you need a wrapper element inside of your modal component, we recommend using a `<div class="ion-page">` 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:

2
core/src/components/modal/usage/react.md
View File

@ -17,6 +17,8 @@ export const ModalExample: React.FC = () => {
};
```
> If you need a wrapper element inside of your modal component, we recommend using an `<IonPage>` 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.

2
core/src/components/modal/usage/stencil.md
View File

@ -44,6 +44,8 @@ export class PageModal {
}
```
> If you need a wrapper element inside of your modal component, we recommend using a `<div class="ion-page">` so that the component dimensions are still computed properly.
### Passing Data
During creation of a modal, data can be passed in through the `componentProps`.

20
core/src/components/modal/usage/vue.md
View File

@ -1,15 +1,13 @@
```html
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
{{ content }}
</ion-content>
</div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
{{ content }}
</ion-content>
</template>
<script>
@ -93,3 +91,5 @@ export default defineComponent({
});
</script>
```
> If you need a wrapper element inside of your modal component, we recommend using an `<ion-page>` so that the component dimensions are still computed properly.