# Drawer

屏幕边缘滑出的浮层面板。

## Usage

### Basic

<code src="./demos/basic.tsx"></code>

### 可见状态（`visible`）非受控的抽屉

<code src="./demos/uncontrolled.tsx"></code>

### 不可见时自动销毁

<code src="./demos/auto-destroy.tsx"></code>

### Loading

`onOk` 返回一个 Promise，则主要按钮会切换到 `loading` 状态

<code src="./demos/loading.tsx"></code>

### 对 `footer` 进行配置

通过对传入 prop `footer` 的 `Footer` 进行配置，我们可以控制 `footer` 中按钮的文本、类型等

<code src="./demos/footer.tsx"></code>

### 自定义 `Footer` 组件

你也可以实现完全自定义的 `Footer` 组件，注意在自定义的 `Footer` 组件中可以通过 `useDrawerFooterCtx` 获得当前抽屉的信息

<code src="./demos/custom-footer.tsx"></code>

### 点击 mask 不关闭

<code src="./demos/mask-clickable.tsx"></code>

### 外部套了 PopupContainerProvider 仍然不会影响 popup 的效果

`Drawer` 会 append 到 body 最后的字节点位置，而此时如果提供了 `PopupContainerProvider`，
使其在当前 dom 下生成 dropdown，则会导致按顺序计算覆盖方式(z-index 相同)，即后者覆盖前者。
`Drawer` 通过自带 `PopupContainerProvider` 的方式让其子节点的弹窗渲染到 `Drawer` 下面可规避此类问题。

<code src="./demos/dropdown.tsx"></code>

### 多层 Drawer

<code src="./demos/multi-drawer.tsx"></code>

<code src="./demos/dev/tooltip.tsx"></code>

<code src="./demos/dev/multi-drawer-proof.tsx"></code>

<code src="./demos/dev/multi-drawer-init-visible-true.tsx"></code>

<API src="./Drawer.tsx" exports='["default", "DrawerFooter"]'></API>