Bottom Sheet v2
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.
- 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.
- Drag and drop the
BottomSheetinto your main frame.
- Connect it to the frame that you want to use as content.
- Edit the props controls accord your needs.
- Select the main frame and active the Preview mode (⌘+P)
- Drag it up/down ✨
- 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.
Copy & paste this code on your overrides file.
Feel free to edit and extend them to whatever your need.
|Name||Description||Use it on|
||Move the sheet to the bottom state||Frame|
||Move the sheet to the middle state *||Frame|
||Move the sheet to the top state||Frame|
||Change the sheet state||BottomSheet Component|
* To use
TapToMiddle you must to set to ON the Middle State property on the Bottom Sheet options.
Send me a tweet @NocheVolta
- Support interaction with elements below the sheet
- Add Overrides to move the sheet.
- Refactor with new Framer API and hooks.
- Initial release with new account.
Opening Package in Framer X...
Don’t have Framer X yet?Start your Free Trial