How can I create a slide-out like Magento?

How can I create a slide out panel in Bubble like this one:

https://devdocs.magento.com/guides/v2.2/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.html

My UI designer recommends using a slide-out panel since there is a lot of data that needs to be entered for specific actions (and multilevel interaction) that make a modal window unwieldy.

Thank you!

-ad

Hi @antoni.deighton :slight_smile: Welcome to the Forum! One way is to use 2 floating groups to create a similar effect! One floating group would be used for a ‘black overlay effect’ (to ‘grey out’ the content of the main page, beneath the Slide Out Floating Group element), and above that would be the Slide Out Floating Group. Here is an example:

Preview:

Editor:

On this page, there is a Sidebar Floating Group element (set to float:both) and the main page content:

Above that is the Black Overlay Floating Group that is equal to the height and width of the page (set to float: both):

And above that is the Slide Out Floating Group (which expands the height of the page, but not the entire width (set to float: both):

Then there are two workflow events:


This action shows the Black Overlay Floating Group immediately, and then the Slide Out Floating Group slides into the page using the animation “Slide Right In”


This action hides the Slide Out Floating Group using the action “Slide Right Out”, and hides the Black Overlay Floating Group

Note: For this work properly, make sure the Slide Out Floating Group element is ‘above’ all of the other elements on the page, using the “Bring to Front” editor action a couple times. That should work! :slight_smile:

6 Likes

THANK YOU!!! for the descriptive explanation. I will be trying this out.

1 Like

No problem at all! :slight_smile: Let me know if you have any questions!

1 Like