Skip to content

Commit 1d0f3cf

Browse files
nolimits4webnolimits4web
committed
chore: sheet breakpoints demos
1 parent 3ec8cc1 commit 1d0f3cf

4 files changed

Lines changed: 136 additions & 1 deletion

File tree

‎kitchen-sink/core/pages/sheet-modal.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,13 @@
4545
<p>
4646
<a class="button button-fill sheet-open" data-sheet=".demo-sheet-swipe-to-step">Swipe To Step</a>
4747
</p>
48+
49+
<p>In addition to "swipe step" there is a support for position breakpoints (multiple steps):</p>
50+
<p>
51+
<a class="button button-fill sheet-open" data-sheet=".demo-sheet-breakpoints">Breakpoints</a>
52+
</p>
4853
</div>
54+
4955
</div>
5056

5157

@@ -163,7 +169,7 @@
163169

164170
<div class="sheet-modal demo-sheet-swipe-to-step" style="height:auto">
165171
<div class="sheet-modal-inner">
166-
<div class="swipe-handler" @click=${toggleSwipeStep}></div>
172+
<div class="swipe-handler"></div>
167173
<div class="sheet-modal-swipe-step">
168174
<div class="display-flex padding justify-content-space-between align-items-center">
169175
<div style="font-size: 18px"><b>Total:</b></div>
@@ -200,6 +206,19 @@
200206

201207
</div>
202208
</div>
209+
210+
<div class="sheet-modal demo-sheet-breakpoints" style="height:auto">
211+
<div class="sheet-modal-inner">
212+
<div class="swipe-handler" style="background-color: transparent;"></div>
213+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
214+
Section 1</div>
215+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
216+
Section 2</div>
217+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
218+
Section 3</div>
219+
220+
</div>
221+
</div>
203222
</div>
204223
</template>
205224
<script>
@@ -208,6 +227,7 @@
208227
let sheetPush;
209228
let sheetSwipeToClose;
210229
let sheetSwipeToStep;
230+
let sheetBreakpoints;
211231

212232
const toggleSwipeStep = () => {
213233
sheetSwipeToStep.stepToggle();
@@ -260,6 +280,15 @@
260280
push: true,
261281
backdrop: true,
262282
});
283+
sheetBreakpoints = $f7.sheet.create({
284+
el: '.demo-sheet-breakpoints',
285+
swipeToClose: true,
286+
breakpoints: [0.33, 0.66],
287+
backdrop: true,
288+
backdropBreakpoint: 0.66,
289+
push: true,
290+
pushBreakpoint: 0.66,
291+
});
263292
});
264293
$on('pageBeforeOut', () => {
265294
// Close opened sheets on page out
@@ -273,6 +302,7 @@
273302
if (sheetPush) sheetPush.destroy();
274303
if (sheetSwipeToClose) sheetSwipeToClose.destroy();
275304
if (sheetSwipeToStep) sheetSwipeToStep.destroy();
305+
if (sheetBreakpoints) sheetBreakpoints.destroy();
276306
});
277307

278308
return $render;

‎kitchen-sink/react/src/pages/sheet-modal.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,14 @@ export default () => {
122122
Swipe To Step
123123
</Button>
124124
</p>
125+
<p>
126+
In addition to "swipe step" there is a support for position breakpoints (multiple steps):
127+
</p>
128+
<p>
129+
<Button fill sheetOpen=".demo-sheet-breakpoints">
130+
Breakpoints
131+
</Button>
132+
</p>
125133
</Block>
126134

127135
<Sheet
@@ -312,6 +320,49 @@ export default () => {
312320
</ListItem>
313321
</List>
314322
</Sheet>
323+
324+
<Sheet
325+
className="demo-sheet-breakpoints"
326+
style={{ height: 'auto' }}
327+
swipeToClose
328+
breakpoints={[0.33, 0.66]}
329+
backdrop
330+
backdropBreakpoint={0.66}
331+
push
332+
pushBreakpoint={0.66}
333+
>
334+
<div className="swipe-handler" style={{ backgroundColor: 'transparent' }}></div>
335+
<div
336+
style={{
337+
display: 'flex',
338+
alignItems: 'center',
339+
justifyContent: 'center',
340+
height: '20vh',
341+
}}
342+
>
343+
Section 1
344+
</div>
345+
<div
346+
style={{
347+
display: 'flex',
348+
alignItems: 'center',
349+
justifyContent: 'center',
350+
height: '20vh',
351+
}}
352+
>
353+
Section 2
354+
</div>
355+
<div
356+
style={{
357+
display: 'flex',
358+
alignItems: 'center',
359+
justifyContent: 'center',
360+
height: '20vh',
361+
}}
362+
>
363+
Section 3
364+
</div>
365+
</Sheet>
315366
</Page>
316367
);
317368
};

‎kitchen-sink/svelte/src/pages/sheet-modal.svelte‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@
102102
<p>
103103
<Button fill sheetOpen=".demo-sheet-swipe-to-step">Swipe To Step</Button>
104104
</p>
105+
<p>In addition to "swipe step" there is a support for position breakpoints (multiple steps):</p>
106+
<p>
107+
<Button fill sheetOpen=".demo-sheet-breakpoints">Breakpoints</Button>
108+
</p>
105109
</Block>
106110

107111
<Sheet class="demo-sheet" opened={sheetOpened} onSheetClosed={() => (sheetOpened = false)}>
@@ -264,4 +268,26 @@
264268
<ListItem title="Delivery"><b slot="after">$120</b></ListItem>
265269
</List>
266270
</Sheet>
271+
272+
<Sheet
273+
class="demo-sheet-breakpoints"
274+
style="height: auto"
275+
swipeToClose
276+
breakpoints={[0.33, 0.66]}
277+
backdrop
278+
backdropBreakpoint={0.66}
279+
push
280+
pushBreakpoint={0.66}
281+
>
282+
<div class="swipe-handler" style="background-color: transparent;" />
283+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
284+
Section 1
285+
</div>
286+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
287+
Section 2
288+
</div>
289+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh;">
290+
Section 3
291+
</div>
292+
</Sheet>
267293
</Page>

‎kitchen-sink/vue/src/pages/sheet-modal.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@
4242
<p>
4343
<f7-button fill sheet-open=".demo-sheet-swipe-to-step">Swipe To Step</f7-button>
4444
</p>
45+
<p>
46+
In addition to "swipe step" there is a support for position breakpoints (multiple steps):
47+
</p>
48+
<p>
49+
<f7-button fill sheet-open=".demo-sheet-breakpoints">Breakpoints</f7-button>
50+
</p>
4551
</f7-block>
4652

4753
<f7-sheet v-model:opened="sheetOpened" class="demo-sheet">
@@ -219,6 +225,28 @@
219225
</f7-list-item>
220226
</f7-list>
221227
</f7-sheet>
228+
229+
<f7-sheet
230+
class="demo-sheet-breakpoints"
231+
style="height: auto"
232+
swipe-to-close
233+
:breakpoints="[0.33, 0.66]"
234+
backdrop
235+
:backdrop-breakpoint="0.66"
236+
push
237+
:push-breakpoint="0.66"
238+
>
239+
<div class="swipe-handler" style="background-color: transparent"></div>
240+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh">
241+
Section 1
242+
</div>
243+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh">
244+
Section 2
245+
</div>
246+
<div style="display: flex; align-items: center; justify-content: center; height: 20vh">
247+
Section 3
248+
</div>
249+
</f7-sheet>
222250
</f7-page>
223251
</template>
224252
<script>

0 commit comments

Comments
 (0)