¨# Bottom Sheet v3
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
BottomSheet into 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.
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.
||Use it on
|Move the sheet to the bottom state
|Move the sheet to the middle state *
|Move the sheet to the top state
|Change the sheet state
* To use
TapToMiddle you must to set to ON the Middle State property on the Bottom Sheet options.
Send me a tweet @NocheVolta
- Rename component because the other one is a zombie…
- Fix typo on sheetPosition prop
- 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.