Skip to main content

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:

Drawer configuration

NameTypeConnectableTemplatableDefaultDescription
No PaddingbooleanfalsefalsefalseWhether you want to add extra space between the component and the border.
Drawer TitlestringfalsefalseDrawer titleThe title of the container called by Drawer.
LabelstringtruefalsePress meThe button label.
Colorblue, red, dark, light, green, gray, nonefalsefalseblueThe button color.
Sizexs, sm, md , lg, xlfalsefalsexsThe button size.
Fill containerbooleanfalsefalsefalseWhether the button should fill the container.
DisabledbooleanfalsefalsefalseWhether the button should be disabled.

Component controls

NameParametersDescriptionExample
openid: stringOpen the drawer.open('a')
closeid: stringClose 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.