Drawer
A slide-out panel from any edge of the screen. Same open/close mechanism as Dialog.
Insert image: A Drawer component rendered on the canvas sliding up from the bottom edge, showing content inside the drawer panel with a semi-transparent overlay behind
Properties
| Property | Description |
|---|---|
drawerPosition | Which edge: bottom, top, left, right. |
drawerHeight | Height (for top/bottom) or width (for left/right). |
closeOnOverlayClick | Whether clicking outside dismisses the drawer. |
Opening and Closing
element.{componentId}.open (boolean)
Same as Dialog — use “Set Variable” click actions to toggle.
Drag to Close
Drawers opened from the bottom or top support drag-to-close. The user can swipe the drawer away without tapping a close button.
Use Cases
- Bottom sheet for additional options
- Side navigation menu
- Payment details panel
- Filter/sort controls
Last updated on