Request: Sheet swipe-to-step breakpoints

Questions
1

Hi @nolimits4web,

For future consideration, can you please add more flexibility to the breakpoints of the Sheet swipe-to-step. Ionic has a great solution (ion-modal: Ionic Mobile App Custom Modal API Component) where you can pass an array of percentages in [0, 0.5, 1], along with initialbreakpoint and backdropBreakpoint properties. I’d love to see these options included.

Thanks!

2 Likes
2

Thanks for the prompt update in 8.3, @nolimits4web . I’m implementing the new solution. The previous issue was the off-screen content’s height determining the sheet’s position, potentially placing it off-page (beyond 1). This still seems to be an issue. Instead of a consistent sheet height with scrollable content beneath (like in map or delivery apps), the content still seems to determine the sheet’s position.

Can future revisions ensure the sheet aligns with the breakpoint, irrespective of content length? Hope that makes sense, and thanks again for the swift implmentation!

3

You can easily limit sheet height with max-height CSS property

4

You’re absolutely correct and thank you for reminding me. Just to demonstrate the desired behaviour, in this example:

		<f7-sheet
			style="max-height: 100vh"
			class="demo-sheet-breakpoints"
			swipe-to-close
			:breakpoints="[0.33, 0.66, 1]"
			backdrop
			:backdrop-breakpoint="0.66"
		>
			<div class="swipe-handler" style="background-color: transparent"></div>
			<p class="block">
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt
				eligendi, aperiam dolore ipsam ullam provident inventore quo dicta
				accusantium rerum, a ea. At nisi ex minus sint eveniet voluptas enim!
			</p>
			<p class="block">
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt
				eligendi, aperiam dolore ipsam ullam provident inventore quo dicta
				accusantium rerum, a ea. At nisi ex minus sint eveniet voluptas enim!
			</p>
		</f7-sheet>

The sheet seems to only go to the height of each paragraph (much shorter than the breakpoints). Is there a way to have the sheet height always respect/prioritise the breakpoint position and scroll overflow?

P.S. amazing work again (as always!)

5

It always respects breakpoints. Breakpoint is the ratio of sheet height

1 Like
6

Thank you for the clarification :smile:! It was how I was thinking of it in relation to the page. Your reply helped me understand. This now works as expected, and the method to change breakpoints also works perfectly.

In case anyone else is also playing around:

<f7-sheet @sheet:breakpoint="breakPoint" style="height: auto; max-height: 100vh" class="demo-sheet-breakpoints" swipe-to-close :breakpoints="[0.33, 0.66, 1]" backdrop	:backdrop-breakpoint="0.66">
	<div class="swipe-handler" style="background-color: transparent"></div>
	<div style="height: 100vh; overflow: scroll">
		<p>
			<f7-button large fill @click="f7.sheet.setBreakpoint('.demo-sheet-breakpoints', 0.33)">0.33</f7-button>
		</p>
		<p v-for="(n, index) in 10" :key="index" class="block">
			Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciun eligendi, aperiam dolore ipsam ullam provident inventore quo dicta accusantium rerum, a ea. At nisi ex minus sint eveniet voluptas enim!</p>
	</div>
</f7-sheet>