In this blog we are gonna explain how to make a retractable panel
This sort of panels are usually used to display filters in search criteria or cart grids. we are gonna make a simple demonstration on how to make one retractable panel today.
If the panel is gonna be right or left-side, start by using a horizontal container to begin with. After that add the to other containers one for the panel and the other for the rest of the screen.
Now we add an icon the will control the expanding of the panel (in my example I used an arrow cuz it looks better also it offers us something else that we will show you bellow).
We will add a simple function to on select event for this icon that makes a simple variable to true or false.
Optional* if you used the arrow you can add this command to the rotation property that will rotate the arrow 180°
If you decide to not use this method then we suggest you make the arrow invisible after the variable becomes true.
To do that, add this method to the visible parameter of the arrow:
The last element we will ad is a close button on the panel container so that we can close it. this is not needed if we sue the rotation method but if you don’t and decide to make the arrow invisible instead then you need to add this button cuz its the only way to retract the panel. I used a label but you can use anything that has a on select trigger event.
Now comes the main part, Controlling the appearance of the panel container. You can do this by controlling the width (set the width to 0 if the variable is false and set it back to 300 if the variable is true)
Or you can control it by making the container invisible. By doing so the container disappears because it will take the weight value of 0 also and all the elements inside becomes invisible also.
Since we usually keep the weight of the containers unchanged (dynamic) then the main container will take the remaining space on the horizontal container so it will seem as the panel container closed.
And this is the panel shown
