Skip to content

Commit 65ef887

Browse files
thetaPCthetaPC
authored
feat(modal): add expandToScroll section (#4021)
1 parent 430a60b commit 65ef887

File tree

8 files changed

+920
-0
lines changed

8 files changed

+920
-0
lines changed

‎docs/api/modal.md

+8
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,14 @@ import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle
157157

158158
<SheetHandleBehaviorExample />
159159

160+
### Scrolling content at all breakpoints
161+
162+
Sheet modals can be configured to allow scrolling content at all breakpoints, making them ideal for displaying content larger than the viewport. By setting the `expandToScroll` property to `false`, the content remains scrollable at every breakpoint. Otherwise, by default, scrolling is only enabled when the sheet modal is fully expanded.
163+
164+
import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expand-to-scroll/index.md';
165+
166+
<SheetScrollingContentExample />
167+
160168
## Styling
161169

162170
Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.

‎static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
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
11+
trigger="open-modal"
12+
[initialBreakpoint]="0.25"
13+
[breakpoints]="[0, 0.25, 0.5, 0.75, 1]"
14+
[expandToScroll]="false"
15+
>
16+
<ng-template>
17+
<ion-content>
18+
<ion-list>
19+
<ion-item>
20+
<ion-avatar slot="start">
21+
<ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
22+
</ion-avatar>
23+
<ion-label>
24+
<h2>Connor Smith</h2>
25+
<p>Sales Rep</p>
26+
</ion-label>
27+
</ion-item>
28+
<ion-item>
29+
<ion-avatar slot="start">
30+
<ion-img
31+
alt="Silhouette of a person's head"
32+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
33+
></ion-img>
34+
</ion-avatar>
35+
<ion-label>
36+
<h2>Jack Smith</h2>
37+
<p>Product Designer</p>
38+
</ion-label>
39+
</ion-item>
40+
<ion-item>
41+
<ion-avatar slot="start">
42+
<ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
43+
</ion-avatar>
44+
<ion-label>
45+
<h2>Daniel Smith</h2>
46+
<p>Product Designer</p>
47+
</ion-label>
48+
</ion-item>
49+
<ion-item>
50+
<ion-avatar slot="start">
51+
<ion-img
52+
alt="Silhouette of a person's head"
53+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
54+
></ion-img>
55+
</ion-avatar>
56+
<ion-label>
57+
<h2>Claire Smith</h2>
58+
<p>Graphic Designer</p>
59+
</ion-label>
60+
</ion-item>
61+
<ion-item>
62+
<ion-avatar slot="start">
63+
<ion-img src="https://i.pravatar.cc/300?u=c"></ion-img>
64+
</ion-avatar>
65+
<ion-label>
66+
<h2>Kim Smith</h2>
67+
<p>Software Engineer</p>
68+
</ion-label>
69+
</ion-item>
70+
<ion-item>
71+
<ion-avatar slot="start">
72+
<ion-img
73+
alt="Silhouette of a person's head"
74+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
75+
></ion-img>
76+
</ion-avatar>
77+
<ion-label>
78+
<h2>Alex Smith</h2>
79+
<p>Software Engineer</p>
80+
</ion-label>
81+
</ion-item>
82+
<ion-item>
83+
<ion-avatar slot="start">
84+
<ion-img
85+
alt="Silhouette of a person's head"
86+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
87+
></ion-img>
88+
</ion-avatar>
89+
<ion-label>
90+
<h2>Eric Smith</h2>
91+
<p>Product Manager</p>
92+
</ion-label>
93+
</ion-item>
94+
<ion-item>
95+
<ion-avatar slot="start">
96+
<ion-img
97+
alt="Silhouette of a person's head"
98+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
99+
></ion-img>
100+
</ion-avatar>
101+
<ion-label>
102+
<h2>Grace Smith</h2>
103+
<p>Product Manager</p>
104+
</ion-label>
105+
</ion-item>
106+
<ion-item>
107+
<ion-avatar slot="start">
108+
<ion-img
109+
alt="Silhouette of a person's head"
110+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
111+
></ion-img>
112+
</ion-avatar>
113+
<ion-label>
114+
<h2>Henry Smith</h2>
115+
<p>Product Owner</p>
116+
</ion-label>
117+
</ion-item>
118+
<ion-item>
119+
<ion-avatar slot="start">
120+
<ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
121+
</ion-avatar>
122+
<ion-label>
123+
<h2>Greg Smith</h2>
124+
<p>Director of Operations</p>
125+
</ion-label>
126+
</ion-item>
127+
<ion-item>
128+
<ion-avatar slot="start">
129+
<ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
130+
</ion-avatar>
131+
<ion-label>
132+
<h2>Zoey Smith</h2>
133+
<p>CEO</p>
134+
</ion-label>
135+
</ion-item>
136+
<ion-item>
137+
<ion-avatar slot="start">
138+
<ion-img
139+
alt="Silhouette of a person's head"
140+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
141+
></ion-img>
142+
</ion-avatar>
143+
<ion-label>
144+
<h2>Oliver Smith</h2>
145+
<p>COO</p>
146+
</ion-label>
147+
</ion-item>
148+
<ion-item>
149+
<ion-avatar slot="start">
150+
<ion-img
151+
alt="Silhouette of a person's head"
152+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
153+
></ion-img>
154+
</ion-avatar>
155+
<ion-label>
156+
<h2>Emma Smith</h2>
157+
<p>CTO</p>
158+
</ion-label>
159+
</ion-item>
160+
</ion-list>
161+
</ion-content>
162+
</ng-template>
163+
</ion-modal>
164+
</ion-content>
165+
```

‎static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonAvatar,
5+
IonButton,
6+
IonContent,
7+
IonHeader,
8+
IonImg,
9+
IonItem,
10+
IonLabel,
11+
IonList,
12+
IonModal,
13+
IonTitle,
14+
IonToolbar,
15+
} from '@ionic/angular/standalone';
16+
17+
@Component({
18+
selector: 'app-example',
19+
templateUrl: 'example.component.html',
20+
styleUrls: ['example.component.css'],
21+
imports: [
22+
IonAvatar,
23+
IonButton,
24+
IonContent,
25+
IonHeader,
26+
IonImg,
27+
IonItem,
28+
IonLabel,
29+
IonList,
30+
IonModal,
31+
IonTitle,
32+
IonToolbar,
33+
],
34+
})
35+
export class ExampleComponent {}
36+
```

‎static/usage/v8/modal/sheet/expand-to-scroll/demo.html

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Modal | Sheet</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-header>
16+
<ion-toolbar>
17+
<ion-title>App</ion-title>
18+
</ion-toolbar>
19+
</ion-header>
20+
<ion-content class="ion-padding">
21+
<ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
22+
23+
<ion-modal trigger="open-modal" initial-breakpoint="0.25" expand-to-scroll="false">
24+
<ion-content>
25+
<ion-list>
26+
<ion-item>
27+
<ion-avatar slot="start">
28+
<ion-img src="https://i.pravatar.cc/300?u=b" />
29+
</ion-avatar>
30+
<ion-label>
31+
<h2>Connor Smith</h2>
32+
<p>Sales Rep</p>
33+
</ion-label>
34+
</ion-item>
35+
<ion-item>
36+
<ion-avatar slot="start">
37+
<ion-img
38+
alt="Silhouette of a person's head"
39+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
40+
/>
41+
</ion-avatar>
42+
<ion-label>
43+
<h2>Jack Smith</h2>
44+
<p>Product Designer</p>
45+
</ion-label>
46+
</ion-item>
47+
<ion-item>
48+
<ion-avatar slot="start">
49+
<ion-img src="https://i.pravatar.cc/300?u=a" />
50+
</ion-avatar>
51+
<ion-label>
52+
<h2>Daniel Smith</h2>
53+
<p>Product Designer</p>
54+
</ion-label>
55+
</ion-item>
56+
<ion-item>
57+
<ion-avatar slot="start">
58+
<ion-img
59+
alt="Silhouette of a person's head"
60+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
61+
/>
62+
</ion-avatar>
63+
<ion-label>
64+
<h2>Claire Smith</h2>
65+
<p>Graphic Designer</p>
66+
</ion-label>
67+
</ion-item>
68+
<ion-item>
69+
<ion-avatar slot="start">
70+
<ion-img src="https://i.pravatar.cc/300?u=c" />
71+
</ion-avatar>
72+
<ion-label>
73+
<h2>Kim Smith</h2>
74+
<p>Software Engineer</p>
75+
</ion-label>
76+
</ion-item>
77+
<ion-item>
78+
<ion-avatar slot="start">
79+
<ion-img
80+
alt="Silhouette of a person's head"
81+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
82+
/>
83+
</ion-avatar>
84+
<ion-label>
85+
<h2>Alex Smith</h2>
86+
<p>Software Engineer</p>
87+
</ion-label>
88+
</ion-item>
89+
<ion-item>
90+
<ion-avatar slot="start">
91+
<ion-img
92+
alt="Silhouette of a person's head"
93+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
94+
/>
95+
</ion-avatar>
96+
<ion-label>
97+
<h2>Eric Smith</h2>
98+
<p>Product Manager</p>
99+
</ion-label>
100+
</ion-item>
101+
<ion-item>
102+
<ion-avatar slot="start">
103+
<ion-img
104+
alt="Silhouette of a person's head"
105+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
106+
/>
107+
</ion-avatar>
108+
<ion-label>
109+
<h2>Grace Smith</h2>
110+
<p>Product Manager</p>
111+
</ion-label>
112+
</ion-item>
113+
<ion-item>
114+
<ion-avatar slot="start">
115+
<ion-img
116+
alt="Silhouette of a person's head"
117+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
118+
/>
119+
</ion-avatar>
120+
<ion-label>
121+
<h2>Henry Smith</h2>
122+
<p>Product Owner</p>
123+
</ion-label>
124+
</ion-item>
125+
<ion-item>
126+
<ion-avatar slot="start">
127+
<ion-img src="https://i.pravatar.cc/300?u=d" />
128+
</ion-avatar>
129+
<ion-label>
130+
<h2>Greg Smith</h2>
131+
<p>Director of Operations</p>
132+
</ion-label>
133+
</ion-item>
134+
<ion-item>
135+
<ion-avatar slot="start">
136+
<ion-img src="https://i.pravatar.cc/300?u=e" />
137+
</ion-avatar>
138+
<ion-label>
139+
<h2>Zoey Smith</h2>
140+
<p>CEO</p>
141+
</ion-label>
142+
</ion-item>
143+
<ion-item>
144+
<ion-avatar slot="start">
145+
<ion-img
146+
alt="Silhouette of a person's head"
147+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
148+
/>
149+
</ion-avatar>
150+
<ion-label>
151+
<h2>Oliver Smith</h2>
152+
<p>COO</p>
153+
</ion-label>
154+
</ion-item>
155+
<ion-item>
156+
<ion-avatar slot="start">
157+
<ion-img
158+
alt="Silhouette of a person's head"
159+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
160+
/>
161+
</ion-avatar>
162+
<ion-label>
163+
<h2>Emma Smith</h2>
164+
<p>CTO</p>
165+
</ion-label>
166+
</ion-item>
167+
</ion-list>
168+
</ion-content>
169+
</ion-modal>
170+
</ion-content>
171+
</ion-app>
172+
173+
<script>
174+
const modal = document.querySelector('ion-modal');
175+
176+
modal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
177+
</script>
178+
</body>
179+
</html>

0 commit comments

Comments
 (0)