Customizing a Drawer Element in a Quick App

About the Drawer Element

The drawer element is a special pop-up panel that can create the effect of opening and closing a drawer in an app. This element has the following features:

• It can be displayed on either side of the screen.
• Its width can be customized.
• It has a mask layer that a user can tap to close the drawer.
• It can be opened by swiping on the screen.

The drawer element consists of two parts: controls and content. In most cases, controls is a clickable element, such as button or icon that can be seen as real handles, whereas content refers to what is inside the drawer. You can expand or collapse content by tapping controls. Therefore, when the drawer element is used, the page layout can be designed as follows:

<div class=“page">
    <div class=“controls">
      <image></image>
     </div>
    <stack class=“drawer_container”>
        <div class=“page_content”>
           …
        </div>
         <drawer class="drawer">
            <div class=“content”>
             …
             </div>
          </drawer >
    </stack>
 </div>

Development Procedure

The drawer element is an extended capability that you cannot implement using the existing elements of quick apps. It requires custom elements.

Customizing the Subelements

Unlike the drawer’s appearance, which can be universally used, the layout of the drawer’s content may vary and therefore cannot be hardcoded. Otherwise, once any part of the content UI is changed, the subelements need to be modified, which violates the open-closed principle of programming.
Therefore, in the drawer.ux file, the slot element is used to bear the content defined in the parent element, and the drawer element is used to define the content’s layout. The code is as follows:

Customizing the Attributes and Supported Events of Subelements

Supported attributes

Supported event

Designing the Opening and Closing Animation of the Drawer

• Set display to none to hide the drawer by default.
• Control the opening and closing animation of the drawer by changing the X coordinate. When opened, the drawer moves to the visible area, and when closed, it moves off the screen. The animation effect is smooth regardless of whether the drawer is opened or closed.
• Control the displayed position of the drawer through flex-direction of the div element. To display the drawer on the left or right, set the value to row or row-reverse accordingly.

Figure 1: Style for opening and closing the drawer on the left

Figure 2: Style for opening and closing the drawer on the right

Figure 3: Code for opening and closing the drawer on the left

Figure 4: Code for opening and closing the drawer on the right

Designing the Mask Layer

The mask layer is hidden by default, which means the value of display is none. The mask layer is displayed when the drawer is opened and hidden when the drawer is closed.

Implementing Data Communication Between the Parent Element and Subelements

• The parent element transfers events of opening and closing the drawer to subelements through parentVm.$broadcast(). The subelements listen to events and parameters through $on().
• The subelements listen to how mode changes through $watch() to modify the CSS style, displaying the drawer in the correct position.
• The subelements notify the parent element through the drawerchange event and returned parameters.

Opening the Drawer by Swiping

By listening to the touchstart and touchend events, you can swipe on the edge of the screen to open the drawer.

Summary

In this article, you will learn how to:

• Customize subelements, including their attributes and supported events.
• Implement data communication between the parent element and subelements.
• Design the opening and closing animation.
• Design the mask layer.

You can check related documents to learn even more.

Sample code — drawer.ux