Drawer

The drawer is container called by a button. Once you click on the button, a side tab will appear on which you can display other components.

To add a component to a container, you can either click on Insert while you selected the opened drawer, or you can move an existing component by copy/pasting it.

The following section details Drawer component's specific settings. For more details on the App editor, check the dedicated documentation or the App editor Quickstart:

App editor Documentation

The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Apps quickstart

Learn how to build your first app in a matter of minutes.

Drawer configuration

Name	Type	Connectable	Templatable	Default	Description
No Padding	boolean	false	false	false	Whether you want to add extra space between the component and the border.
Drawer Title	string	false	false	Drawer title	The title of the container called by Drawer.
Label	string	true	false	Press me	The button label.
Color	blue, red, dark, light, green, gray, none	false	false	blue	The button color.
Size	xs, sm, md , lg, xl	false	false	xs	The button size.
Fill container	boolean	false	false	false	Whether the button should fill the container.
Disabled	boolean	false	false	false	Whether the button should be disabled.

Controls

This component can be controlled by frontend scripts using these functions:

Name	Parameters	Description	Example
open	id: string	Open the drawer.	open('a')
close	id: string	Close the drawer.	close('a')

Event handlers

The drawer component has the following event handlers:

• onOpen: Trigger a runnable when the drawer is opened.
• onClose: Trigger a runnable when the drawer is closed.

Multiple runnables can be added to each event handler.