Bottom Sheet v2

Iván Flores

Open in Framer X

Bottom Sheet v2

Bottom Sheet is a component inspired on the bottom sheet view pattern that you can find in apps like Google Maps or Maps by Apple.

New on the last version

👉 Overrides, Overrides everywhere!
Add the overrides code to move the sheet tapping any other frame. See instructions below.

👉 It no longer blocks the UI below the sheet
When the sheet is not in the upper state (dim is not visible), it can interact with the elements in the back.

BottomSheet - Demo

Features

  • Define the height for up to 3 different states.
  • Support Overrides to move the sheet with any other frame.
  • Interact with elements behind the component when it is not on the upper state.
  • Use scroll on content within the sheet.
  • Option to use the third state (middle).
  • Gradual opacity on dim and it collapses sheet when tap on it.

Setup

  1. Drag and drop the BottomSheet into your main frame.
  2. Connect it to the frame that you want to use as content.
  3. Edit the props controls accord your needs.
  4. Select the main frame and active the Preview mode (⌘+P)
  5. Drag it up/down ✨
  6. Read the Overrides section to learn how to use them.

If you want to have scroll on your content, active the option on the property controls.
⚠️ To do scroll use the mouse wheel or two fingers on the trackpad.

BottomSheet - Setup

Add Overrides

This component support overrides. If you are not familiarized on how to use overrides, I recommend you to see this tutorial by Athanasia Lykoudi.

Copy & paste this code on your overrides file.
Feel free to edit and extend them to whatever your need.

Name Description Use it on
TapToBottom Move the sheet to the bottom state Frame
TapToMiddle Move the sheet to the middle state * Frame
TapToTop Move the sheet to the top state Frame
ListenTaps Change the sheet state BottomSheet Component

* To use TapToMiddle you must to set to ON the Middle State property on the Bottom Sheet options.

Questions

Send me a tweet @NocheVolta

Changelog

2.2 (1.7.0)

  • Support interaction with elements below the sheet

2.1 (1.5.0)

  • Add Overrides to move the sheet.

2.0 (1.1.0)

  • Refactor with new Framer API and hooks.

1.0 (1.0)

  • Initial release with new account.
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree