---
title: Drawer 抽屉
description: 抽屉常通过单击临近的按钮控件打开，从屏幕边缘滑入的浮层面板，又称半屏弹窗。
isComponent: true
usage: true
spline: navigation
author: swimly
---

## 基本用法

承载展示性的信息内容。当页面空间有限时，可用抽屉增大页面扩展性，通过`header`定义头部内容，通过`body`或者`default`定义中
间内容区域，通过`footer` 定义底部内容区域。

{{ base }}

## 控制遮罩

通过`showOverlay`可控制是否显示遮罩，当显示遮罩的时候，默认点击遮罩的时候会关闭当前遮罩。

{{ overlay }}

## 打开方向

通过`placement`可控制抽屉打开的方向，可选：`top`，`right`，`bottom`，`left`。

{{ position }}

## 抽屉大小

通过`size`可控制打开抽屉的大小，支持 `small`, `medium`, `large`，`300`, `350px`, `30%` , `30em` 等。纵向抽屉调整的是抽屉
宽度，横向抽屉调整的是抽屉高度。

{{ size }}

## 拖动大小

除了上面可设置抽屉的大小外，还可通过`sizeDraggable`设置抽屉可拖拽改变大小。

{{ resize }}

## 打开方式

通过`mode`可设置抽屉打开的方式，有两种：直接展示在内容上方`overlay` 和 推开内容区域`push`。

{{ mode }}

## 在指定容器打开

仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：`position: relative`，通过属性
：`showInAttachedElement`设置。

{{ inAttach }}
