# Drawer

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-1ecdf717968207dd2ad4b244d64913eb81ed9b65%2Fimage%20(179).png?alt=media" alt=""><figcaption></figcaption></figure>

## Basic

#### Drawer Title

Provide the title text to be placed at the header of the widget.

#### Title Alignment

| Property | Description                                             |
| -------- | ------------------------------------------------------- |
| `Left`   | The content is attached to the left side of the widget  |
| `Center` | The content is placed at the center part of the widget  |
| `Right`  | The content is attached to the right side of the widget |

#### Close Button Placement

| Property                                                                                                                                                                                                                                       | Layout                                                              |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-de5ffca5a136e68a7e279a3ae803a2930b35da3e%2Fimage%20(107).png?alt=media" alt="" data-size="original"> | `Left` - Keeps the 'X' close button at the top left of the drawer   |
| <img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-722ec79c0f5c990ea758b91c8ff8e24d3a3a3ef0%2Fimage%20(109).png?alt=media" alt="" data-size="original"> | `Right` - Keeps the 'X' close button at the top right of the drawer |

#### Drawer Placement

| Property                                                                                                                                                                                                                                       | Layout                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| <img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-b70a545b510d81ee1984969278e74047a4947a54%2Fimage%20(111).png?alt=media" alt="" data-size="original"> | `Left` - The slider is attached to the top edge of the screen    |
| <img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-6f547ca9d435afc0fa5b68e363b2aa900d919a5d%2Fimage%20(112).png?alt=media" alt="" data-size="original"> | `Bottom` - The slider is placed at the bottom part of the screen |
| <img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-1e4d4222459497f9d3e10092baf264322fe6ceba%2Fimage%20(113).png?alt=media" alt="" data-size="original"> | `Left` - The slider is attached to the left side of the screen   |
| <img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-aefb0001faa136a0e8cae195e2c3182597c92cf3%2Fimage%20(114).png?alt=media" alt="" data-size="original"> | `Right` - The slider is attached to the right side of the screen |

#### Drawer Widget

Specify the width for the drawer in 'px' value. It is a standard practice to keep the width not more than 30% of the screen, as this is a modal which slides from the edge.

#### Click Outside to Close

Decides whether users can click outside the widget's area to close the drawer or not. The 'X' close button is also used to close the widget.

#### Show Mask

This shows the gray overlay on the rest of the screen when the widget is activated.

#### Enable Close Button

Shows to close button at the top corner as 'X'.

## Interaction

#### Event Handlers

| Event                                        | Description                                                                                                                                                                                                                                                                                           |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**`Close`**</mark> | <p>This event will be triggered when the user closes the drawer.<br><br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-a30d31f97d154fc988f19929795f712735ce2df1%2Fimage%20(115).png?alt=media" alt=""></p> |

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the front clearly.</td></tr></tbody></table>