### 何时使用

当需要一个附加的面板来对页面内容做补充说明时；

当需要在当前任务流中插入临时操作任务时。

### 与页面布局相关

##### 整体界面布局，抽屉在整个页面出现

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E6%8A%BD%E5%B1%89------------1@2x.png" />
  </div>

  <div class="item"></div>
</div>

<hr />

局部区域布局，抽屉仅在当前操作的区域内出现，而不会覆盖整个页面

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E6%8A%BD%E5%B1%89------------2@2x.png" />
  </div>

  <div class="item"></div>
</div>

### 推荐/慎用示例

##### 避免抽屉面积过大，造成覆盖页面较多、无法看到页面的关键信息

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E6%8A%BD%E5%B1%89----------3@2x.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E6%8A%BD%E5%B1%89----------4@2x.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

### 相似组件

| 组件名             | 何时使用                                                                               |
| :----------------- | :------------------------------------------------------------------------------------- |
| [抽屉](./drawer)   | 当需要一个附加的面板来对页面内容做补充说明时；当需要在当前任务流中插入临时操作任务时。 |
| [对话框](./dialog) | 需要对用户进行阻断式提示时。                                                           |
