ionic-team · thetaPC · Apr 12, 2023 · Apr 11, 2023 · Apr 11, 2023 · Apr 11, 2023
@@ -125,6 +125,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac
 
 <SheetBackgroundContentExample />
 
+#### Auto Height Sheet
+
+import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md';
+
+<SheetAutoHeightExample />
+
 #### 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.

@@ -0,0 +1,13 @@
+```css
+.block {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ion-modal {
+  --height: auto;
+}
+```
@@ -0,0 +1,16 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal" [initialBreakpoint]="1" [breakpoints]="[0, 1]">
+    <ng-template>
+      <div class="block">Block of Content</div>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Modal | Sheet</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <style>
+    .block {
+      width: 100%;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    ion-modal {
+      --height: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>App</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+      <ion-modal trigger="open-modal">
+        <div class="block">Block of Content</div> 
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.initialBreakpoint = 1;
+    modal.breakpoints = [0, 1];
+  </script>
+</body>
+
+</html>
@@ -0,0 +1,25 @@
+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_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/modal/sheet/auto-height/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
@@ -0,0 +1,35 @@
+```html
+<style>
+  .block {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ion-modal {
+    --height: auto;
+  }
+</style>
+
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal trigger="open-modal">
+    <div class="block">Block of Content</div> 
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.initialBreakpoint = 1;
+  modal.breakpoints = [0, 1];
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/react.md b/static/usage/v7/modal/sheet/auto-height/react.md
@@ -0,0 +1,54 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+} from '@ionic/react';
+
+function Example() {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Sheet Modal
+        </IonButton>
+        <IonModal
+          ref={modal}
+          trigger="open-modal"
+          initialBreakpoint={1}
+          breakpoints={[0, 1]}
+          style={{
+            '--height': 'auto',
+          }}
+        >
+          <div
+            style={{
+              'width': '100%',
+              'height': '300px',
+              'display': 'flex',
+              'alignItems': 'center',
+              'justifyContent': 'center',
+            }}
+          >
+            Block of Content
+          </div> 
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
@@ -0,0 +1,53 @@
+```html
+<style>
+  .block {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ion-modal {
+    --height: auto;
+  }
+</style>
+
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+    <ion-modal ref="modal" trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
+      <div class="block">Block of Content</div> 
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+    },
+  });
+</script>
+```