From 68cd19dc5147caf7f14b988c9ac829b7a8924c43 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 2 Apr 2024 22:44:20 -0400 Subject: [PATCH] docs(modal): clarify content requirement for sheet modal --- docs/api/modal.md | 4 ++++ versioned_docs/version-v7/api/modal.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/api/modal.md b/docs/api/modal.md index 4c5a129acea..4f35073dade 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -119,6 +119,10 @@ import CardExample from '@site/static/usage/v8/modal/card/basic/index.md'; ### Sheet Modal +:::info +[Content](./content) must be used inside of the sheet modal otherwise your modal content will not be scrollable. +::: + Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`. The `breakpoints` property accepts an array which states each breakpoint that the sheet can snap to when swiped. A `breakpoints` property of `[0, 0.5, 1]` would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. When the modal is swiped to 0%, the modal will be automatically dismissed. Note that the modal cannot be dismissed on swipe if no `0` breakpoint is included, but it can still be dismissed by pressing `Esc` or the hardware back button. diff --git a/versioned_docs/version-v7/api/modal.md b/versioned_docs/version-v7/api/modal.md index 3fd542d87ee..b55c47f73b2 100644 --- a/versioned_docs/version-v7/api/modal.md +++ b/versioned_docs/version-v7/api/modal.md @@ -123,6 +123,10 @@ import CardExample from '@site/static/usage/v7/modal/card/basic/index.md'; ### Sheet Modal +:::info +[Content](./content) must be used inside of the sheet modal otherwise your modal content will not be scrollable. +::: + Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`. The `breakpoints` property accepts an array which states each breakpoint that the sheet can snap to when swiped. A `breakpoints` property of `[0, 0.5, 1]` would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. When the modal is swiped to 0%, the modal will be automatically dismissed. Note that the modal cannot be dismissed on swipe if no `0` breakpoint is included, but it can still be dismissed by pressing `Esc` or the hardware back button.