Customizing a Drawer Element in a Quick App
Tags: javascript, huawei
Published: 2022-04-01 20:47:30

## 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:


![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3yuk6tzxaqoqu1mrg2x.png)


## Customizing the Attributes and Supported Events of           Subelements

Supported attributes

![Image descriptin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd7isqbayvdu5l52rgf0.png)


Supported event


![Image descriptin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy9ntk92rcfewhy5scgg.png)



## 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.


![Image descripion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjf8m7kiceptkakchm7t.png)

_Figure 1: Style for opening and closing the drawer on the left_

![Image descripton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20nqsv7yygy2mpn803ki.png)

_Figure 2: Style for opening and closing the drawer on the right_


![Image descripton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xakl2lu0ou19vahqp9x3.png)

_Figure 3: Code for opening and closing the drawer on the left_

![Image descriptin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56e9f0vzan0rkx2tny9b.png)

_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.


![Image descrption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqowljt7zy14ubwu1kbd.png)


## 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](https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-animation-styles-0000001123530340) to learn even more.

Sample code — [drawer.ux](https://filebin.net/xlzp8cxmd2s22kah)