> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Drawer Component

> Tutorial for the Drawer component, including edition support, use cases, video demos, and basic usage. Learn how to add and configure the Drawer component on a custom page, and how to control its visibility through APIs.

| **Feature**      | **Free edition** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| ---------------- | ---------------- | ----------------- | ------------------------ | --------------------- |
| Drawer component | Not supported    | Not supported     | Supported                | Supported             |

## 1. Use Cases

* Display a prompt to users.
* Ask users to confirm an action.
* Let users handle tasks without leaving the current page or interrupting the workflow.

<Note>
  For component attributes, usage, and examples, see the [Drawer component reference](/open/yida/components/basic/drawer).
</Note>

## 3. Basic Usage of the Drawer Component

### 3.1 Drag the Drawer Component onto the Custom Page and Configure Its Style in the Attribute Panel

Custom page

### 3.2 The Drawer Component Is Hidden by Default; Use the Following API to Show It

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function showDrawer() {
  this.$('drawer1').show();
}
```

**Example:**

Add a click event to a Button component so that clicking the button opens the Drawer component.

Result:

### 3.3 Set the Height and Width in the Attribute Panel to Control the Drawer Size, and Configure Its Pop-Up Position and Exit Method

As shown below:

### 3.4 Configure the Bottom Buttons to Set Their Position, Arrangement, Content, and Action Events

As shown below: