⬜Drawer

In QuickDEV, Drawer serves as an overlay sidebar designed to display information or execute operations without disrupting the workflow on the main window.

The following example builds a shopping cart using a drawer.

Layout

When inserted via a drag-and-drop operation, a Drawer automatically floats on the right side (by default) of the main window. Subsequently, you can add components onto the Drawer as per your requirements. During the editing mode of a Drawer, other components on the canvas are not editable.

After closing a drawer, you can reopen it by selecting the matching label from the Modals menu in the left pane.

Position

Within the Properties tab, you have the option to set the position of the drawer. By default, the drawer is positioned on the right side of the main window.

Resize

In the Properties tab, you can adjust the width of the drawer either by pixels or percentage. However, it's important to note that the height of a drawer remains the same as the main window and is not customizable.

Events

You have the flexibility to reference a drawer within your JavaScript code from any part of your application, or you can invoke it through a "control component" action available in Properties > Interaction > Event handlers.

The subsequent sections provide guidance on opening and closing a drawer by clicking a button in an online shopping application.

Trigger openDrawer

Typically, in an application, you initiate the opening of a drawer by triggering an event such as clicking a button. To implement the opening of a drawer to display the shopping cart, you can follow these steps:

1. Add a button and modify its name to openCartDrawer

2. Set up the event handler for the button. Choose "Control component" as the Action, then choose the component cart and openDrawer method. All modifications will be saved automatically

3. When you click the openCartDrawer button, the associated drawer named cart opens

Trigger closeDrawer

Initiating the closeDrawer action follows a process similar to triggering openDrawer. When configuring the event handler, choose the closeDrawer method. Implementing the closure of a drawer that displays the shopping cart can be accomplished through the following steps:

1. Insert a button and rename it to closeCartDrawer.

2. Configure the event handler for the button. Choose "Control component" as the Action and select the component cart and method closeDrawer. All modifications will be automatically saved.

3. Upon clicking the closeCartDrawer button, the associated drawer named cart will open.