Mobile bottom sheet

Hi everyone, I’m trying to create a mobile bottom sheet like the ones shown here - https://material.io/components/sheets-bottom#expanding-bottom-sheet

I want to have the bottom sheet peak out on the bottom of the screen as the user enters the page. The user can interact with anything on the page as usual, and if they want to see the mobile bottom sheet content, they swipe it up from the bottom to bring it into view. If they swipe it up all the way to the top, they should see an “X” button to get it back down, or they can scroll all the way down to see the ‘starting point’ page again.

Any suggestions on the best way to create this?

Hello @NoaD

Axure RP can detect the gesture ‘Swipe’ in all four directions (left, right, up and down) - why don’t you just use those? When you detect that gesture you can ‘Move’ your group or dynamic panel (this could be your ‘sheet’) into a new position (from bottom part of the screen, midway or all the way to the top). Then when the group or dynamic panel is in a certain position on the screen, that you define, you can choose to hide or show content like the “X”-button.

Seems pretty straight forward :sunny:

Hi @Bahcos, thank you for your reply! I wasn’t able to get this to work, maybe because of the 2 layers of scrolling I am trying to achieve. Appreciate any guidance! Zillow has an example the interaction I am trying to get. I am attaching some screenshots.

Can you also attach your prototype? Then it will be a bit easier for me to help you @NoaD! :slight_smile:

Certainly! I’m attaching a simplified version of the prototype.

Things to note -

  1. The ‘swipe up’ action for the bottom sheet does not work unless the page ‘behind’ the bottom sheet is fully scrolled all the way. The same thing happens when trying to swipe the bottom sheet back down. I’d like users to be able to swipe it up or down whenever they want.
  2. When the bottom sheet is up, the page behind it can still scroll, depending on where the user’s mouse is. Is it possible to force it not to scroll?

Thank you!!Mobile Bottom Sheet.rp (69.6 KB)

Hi @NoaD :hugs:

I have just created this project (It’s Axure RP 10, sorry!).

Note: there is a huge difference when trying/testing the prototype on the computer’s browser and the mobile’s browser. When I try this project in the computer’s browser, I get the same behavior as you described in 1 and 2. When I try it on my mobile, it works as expected; the background behind does not scroll, and the swipe works as expected. I assume it’s because a ‘Swipe’ in desktop and mobile is not the same. :slight_smile:

swipe-test.rp (55.8 KB)

@Bahcos Amazing!! This works :grinning:
Thank you so much!!!

No problem, @NoaD! :slight_smile: Remember to mark the solution, so that other users can find it eventually!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.