> ## 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 组件

> Drawer组件使用教程，包括不同版本支持情况、使用场景、视频展示及基本使用方法。了解如何在自定义页面中添加并配置Drawer组件，以及通过API控制其显示与隐藏等功能。

| **能力**   | **免费版** | **轻享版** | **专业版** | **专属版** |
| -------- | ------- | ------- | ------- | ------- |
| Drawer组件 | 不支持     | 不支持     | 支持      | 支持      |

## 1. 使用场景

* 需要给用户一个提示
* 需要用户进行确认操作
* 需要用户处理事务，又不希望跳转页面以致打断工作流程

<Note>
  组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/basic/drawer)查看
</Note>

## 2. 视频展示

<video controls preload="metadata" poster="https://img.alicdn.com/imgextra/i1/6000000002990/O1CN01GyQTXi1XxSv7F7IBs_!!6000000002990-0-tbvideo.jpg" src="https://yida-support.oss-cn-shanghai.aliyuncs.com/static/mp4/313065759514.mp4" />

## 3. Drawer 组件的基本使用方法

### 3.1 拖动 Drawer 组件到自定义页面中，并在属性中配置 Drawer 组件的样式

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622551893881-ecf7997e-851c-4bcc-b34c-29750f534dfe.png)
</Frame>

自定义页面

### 3.2 Drawer 组件默认是隐藏的，可以通过以下 API 显示 Drawer

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

**举例：**

给按钮组件添加点击事件，点击按钮时显示 Drawer 组件

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622552238508-20722ce7-56d5-4e94-801d-a575f65a977f.png)
</Frame>

展示效果：

<video controls preload="metadata" poster="https://img.alicdn.com/imgextra/i3/6000000001708/O1CN01T67P3N1OUJA476EcP_!!6000000001708-0-tbvideo.jpg" src="https://yida-support.oss-cn-shanghai.aliyuncs.com/static/mp4/312361573265.mp4" />

### 3.3 可以通过配置属性中的高宽来控制 Drawer 的大小，并且可以控制组件的弹出位置以及退出方式

如图所示：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622552428675-739ef6d2-8d37-4aea-a280-6d37e7baa06f.png)
</Frame>

### 3.4 可以通过配置底部按钮来配置按钮的位置、排列、内容以及动作事件

如图所示：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622552557972-77df65fd-2539-4de0-b007-f7a2d4aadc96.png)
</Frame>