Skip to content

Commit b6bb849

Browse files
thetaPCthetaPC
authored
docs(modal): playground for auto height sheets (#2905)
1 parent 2ff757e commit b6bb849

File tree

9 files changed

+263
-0
lines changed

9 files changed

+263
-0
lines changed

‎docs/api/modal.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac
125125

126126
<SheetBackgroundContentExample />
127127

128+
#### Auto Height Sheet
129+
130+
import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md';
131+
132+
<SheetAutoHeightExample />
133+
128134
#### Handle Behavior
129135

130136
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.

‎static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```css
2+
.block {
3+
width: 100%;
4+
height: 300px;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
}
9+
10+
ion-modal {
11+
--height: auto;
12+
}
13+
```

‎static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-title>App</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
<ion-content class="ion-padding">
8+
<ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
9+
10+
<ion-modal trigger="open-modal" [initialBreakpoint]="1" [breakpoints]="[0, 1]">
11+
<ng-template>
12+
<div class="block">Block of Content</div>
13+
</ng-template>
14+
</ion-modal>
15+
</ion-content>
16+
```

‎static/usage/v7/modal/sheet/auto-height/demo.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Modal | Sheet</title>
8+
<link rel="stylesheet" href="../../../../common.css" />
9+
<script src="../../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
12+
<style>
13+
.block {
14+
width: 100%;
15+
height: 300px;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
ion-modal {
22+
--height: auto;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<ion-app>
29+
<ion-header>
30+
<ion-toolbar>
31+
<ion-title>App</ion-title>
32+
</ion-toolbar>
33+
</ion-header>
34+
<ion-content class="ion-padding">
35+
<ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
36+
37+
<ion-modal trigger="open-modal">
38+
<div class="block">Block of Content</div>
39+
</ion-modal>
40+
</ion-content>
41+
</ion-app>
42+
43+
<script>
44+
const modal = document.querySelector('ion-modal');
45+
46+
modal.initialBreakpoint = 1;
47+
modal.breakpoints = [0, 1];
48+
</script>
49+
</body>
50+
51+
</html>

‎static/usage/v7/modal/sheet/auto-height/index.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import vue from './vue.md';
5+
6+
import react_main_tsx from './react/main_tsx.md';
7+
import react_main_css from './react/main_css.md';
8+
9+
import angular_example_component_html from './angular/example_component_html.md';
10+
import angular_example_component_css from './angular/example_component_css.md';
11+
12+
<Playground
13+
version="7"
14+
code={{
15+
javascript,
16+
vue,
17+
react: {
18+
files: {
19+
'src/main.tsx': react_main_tsx,
20+
'src/main.css': react_main_css,
21+
},
22+
},
23+
angular: {
24+
files: {
25+
'src/app/example.component.html': angular_example_component_html,
26+
'src/app/example.component.css': angular_example_component_css,
27+
},
28+
},
29+
}}
30+
src="usage/v7/modal/sheet/auto-height/demo.html"
31+
devicePreview
32+
includeIonContent={false}
33+
/>

‎static/usage/v7/modal/sheet/auto-height/javascript.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
```html
2+
<style>
3+
.block {
4+
width: 100%;
5+
height: 300px;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
}
10+
11+
ion-modal {
12+
--height: auto;
13+
}
14+
</style>
15+
16+
<ion-header>
17+
<ion-toolbar>
18+
<ion-title>App</ion-title>
19+
</ion-toolbar>
20+
</ion-header>
21+
<ion-content class="ion-padding">
22+
<ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
23+
24+
<ion-modal trigger="open-modal">
25+
<div class="block">Block of Content</div>
26+
</ion-modal>
27+
</ion-content>
28+
29+
<script>
30+
var modal = document.querySelector('ion-modal');
31+
32+
modal.initialBreakpoint = 1;
33+
modal.breakpoints = [0, 1];
34+
</script>
35+
```

‎static/usage/v7/modal/sheet/auto-height/react/main_css.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```css
2+
.block {
3+
width: 100%;
4+
height: 300px;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
}
9+
10+
ion-modal {
11+
--height: auto;
12+
}
13+
```

‎static/usage/v7/modal/sheet/auto-height/react/main_tsx.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
```tsx
2+
import React, { useRef } from 'react';
3+
import {
4+
IonButton,
5+
IonModal,
6+
IonHeader,
7+
IonContent,
8+
IonToolbar,
9+
IonTitle,
10+
IonPage,
11+
} from '@ionic/react';
12+
13+
import './main.css';
14+
15+
function Example() {
16+
const modal = useRef<HTMLIonModalElement>(null);
17+
18+
return (
19+
<IonPage>
20+
<IonHeader>
21+
<IonToolbar>
22+
<IonTitle>App</IonTitle>
23+
</IonToolbar>
24+
</IonHeader>
25+
<IonContent className="ion-padding">
26+
<IonButton id="open-modal" expand="block">
27+
Open Sheet Modal
28+
</IonButton>
29+
<IonModal
30+
ref={modal}
31+
trigger="open-modal"
32+
initialBreakpoint={1}
33+
breakpoints={[0, 1]}
34+
>
35+
<div className="block">Block of Content</div>
36+
</IonModal>
37+
</IonContent>
38+
</IonPage>
39+
);
40+
}
41+
42+
export default Example;
43+
```

‎static/usage/v7/modal/sheet/auto-height/vue.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
```html
2+
<style>
3+
.block {
4+
width: 100%;
5+
height: 300px;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
}
10+
11+
ion-modal {
12+
--height: auto;
13+
}
14+
</style>
15+
16+
<template>
17+
<ion-header>
18+
<ion-toolbar>
19+
<ion-title>App</ion-title>
20+
</ion-toolbar>
21+
</ion-header>
22+
<ion-content class="ion-padding">
23+
<ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
24+
25+
<ion-modal trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
26+
<div class="block">Block of Content</div>
27+
</ion-modal>
28+
</ion-content>
29+
</template>
30+
31+
<script lang="ts">
32+
import {
33+
IonButton,
34+
IonModal,
35+
IonHeader,
36+
IonContent,
37+
IonToolbar,
38+
IonTitle,
39+
} from '@ionic/vue';
40+
import { defineComponent } from 'vue';
41+
42+
export default defineComponent({
43+
components: {
44+
IonButton,
45+
IonModal,
46+
IonHeader,
47+
IonContent,
48+
IonToolbar,
49+
IonTitle,
50+
},
51+
});
52+
</script>
53+
```

0 commit comments

Comments
 (0)