diff --git a/docs/api/modal.md b/docs/api/modal.md index cc63089bedf..847b49b460e 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -125,6 +125,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac +#### Auto Height Sheet + +import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md'; + + + #### Handle Behavior Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user. diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md new file mode 100644 index 00000000000..88d0e5c0594 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md new file mode 100644 index 00000000000..3280a3f9e85 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + App + + + + Open Sheet Modal + + + +
Block of Content
+ + + +``` diff --git a/static/usage/v7/modal/sheet/auto-height/demo.html b/static/usage/v7/modal/sheet/auto-height/demo.html new file mode 100644 index 00000000000..ae6eb5ff6d7 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/demo.html @@ -0,0 +1,51 @@ + + + + + + + Modal | Sheet + + + + + + + + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + + + + + diff --git a/static/usage/v7/modal/sheet/auto-height/index.md b/static/usage/v7/modal/sheet/auto-height/index.md new file mode 100644 index 00000000000..35cec0645c0 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v7/modal/sheet/auto-height/javascript.md b/static/usage/v7/modal/sheet/auto-height/javascript.md new file mode 100644 index 00000000000..ec474f8a6b7 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + +``` diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_css.md b/static/usage/v7/modal/sheet/auto-height/react/main_css.md new file mode 100644 index 00000000000..9731921d1c3 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/react/main_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` \ No newline at end of file diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md new file mode 100644 index 00000000000..c368d65d6c5 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md @@ -0,0 +1,43 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + return ( + + + + App + + + + + Open Sheet Modal + + +
Block of Content
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md new file mode 100644 index 00000000000..23b3c38c147 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/vue.md @@ -0,0 +1,53 @@ +```html + + + + + +```