diff --git a/docs/api/modal.md b/docs/api/modal.md index 6e68846652e..81a90b9a91d 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -51,7 +51,7 @@ import ControllerExample from '@site/static/usage/v7/modal/controller/index.md'; When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss. -There are two different ways of using the `canDismiss` property. +There are two different ways of using the `canDismiss` property: setting a boolean value or setting a callback function. :::note Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button. @@ -79,6 +79,14 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f +### Prevent swipe to close + +Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`. + +import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md'; + + + ## Types of modals ### Card Modal diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md new file mode 100644 index 00000000000..de1d6d041ea --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + +
+``` diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md new file mode 100644 index 00000000000..788b9a14c0f --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + async canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } +} +``` diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html new file mode 100644 index 00000000000..620cf48cb9d --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html @@ -0,0 +1,57 @@ + + + + + + + Modal | Can Dismiss + + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it.

+ + + +
+ + + + + + \ No newline at end of file diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md new file mode 100644 index 00000000000..1f24e318e8c --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md new file mode 100644 index 00000000000..e50e279364c --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md @@ -0,0 +1,39 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it. +

+ + + +
+ + +``` diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md new file mode 100644 index 00000000000..c63bd0d1503 --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md @@ -0,0 +1,56 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + async function canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md new file mode 100644 index 00000000000..afd25081c11 --- /dev/null +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md new file mode 100644 index 00000000000..de1d6d041ea --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + +
+``` diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md new file mode 100644 index 00000000000..788b9a14c0f --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + async canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } +} +``` diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html new file mode 100644 index 00000000000..300560bc234 --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html @@ -0,0 +1,57 @@ + + + + + + + Modal | Can Dismiss + + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it.

+ + + +
+ + + + + + \ No newline at end of file diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md new file mode 100644 index 00000000000..a37ce212fc8 --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md new file mode 100644 index 00000000000..e50e279364c --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md @@ -0,0 +1,39 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it. +

+ + + +
+ + +``` diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md new file mode 100644 index 00000000000..c63bd0d1503 --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md @@ -0,0 +1,56 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + async function canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md new file mode 100644 index 00000000000..afd25081c11 --- /dev/null +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md index 68d44332e4e..d669d1c0617 100644 --- a/versioned_docs/version-v6/api/modal.md +++ b/versioned_docs/version-v6/api/modal.md @@ -55,7 +55,7 @@ import ControllerExample from '@site/static/usage/v6/modal/controller/index.md'; When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss. -There are two different ways of using the `canDismiss` property. +There are two different ways of using the `canDismiss` property: setting a boolean value or setting a callback function. :::note Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button. @@ -83,6 +83,14 @@ import CanDismissFunctionExample from '@site/static/usage/v6/modal/can-dismiss/f +### Prevent swipe to close + +Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`. + +import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md'; + + + ## Types of modals ### Card Modal