# @rax-ui/drawer

> Drawer of Rax UI

Latest version **1.0.0-beta.62** (published 2020-11-24) · 0 weekly downloads

## Install

```sh
npm install @rax-ui/drawer
pnpm add @rax-ui/drawer
yarn add @rax-ui/drawer
bun add @rax-ui/drawer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.62 |
| Published | 2020-11-24 |
| First published | 2019-08-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huya.nzb@alibaba-inc.com |
| Maintainers | lianmin, amdgigabyte, myronliu347 |
| Keywords | Rax, rax-component |

## Links

- npm: https://www.npmjs.com/package/@rax-ui/drawer
- npm.io page: https://npm.io/package/@rax-ui/drawer

## Dependencies (9)

- [rax-view](https://npm.io/package/rax-view.md) ^1.1.0
- [@rax-ui/modal](https://npm.io/package/@rax-ui/modal.md) ^1.0.0-beta.62
- [universal-env](https://npm.io/package/universal-env.md) ^3.1.0
- [@rax-ui/styles](https://npm.io/package/@rax-ui/styles.md) ^1.0.0-beta.62
- [rax-create-portal](https://npm.io/package/rax-create-portal.md) ^1.0.0
- [rax-find-dom-node](https://npm.io/package/rax-find-dom-node.md) ^1.0.1
- [@rax-ui/transition](https://npm.io/package/@rax-ui/transition.md) ^1.0.0-beta.62
- [universal-transition](https://npm.io/package/universal-transition.md) ^0.6.5
- [rax-unmount-component-at-node](https://npm.io/package/rax-unmount-component-at-node.md) ^1.0.0

## Recent versions

- 1.0.0-beta.62 (latest) — 2020-11-24
- 1.0.0-beta.47 (next) — 2020-04-17
- 1.0.0-beta.60 — 2020-08-28
- 1.0.0-beta.59 — 2020-08-18
- 1.0.0-beta.57 — 2020-06-22
- 1.0.0-beta.56 — 2020-06-03
- 1.0.0-beta.55 — 2020-05-26
- 1.0.0-beta.54 — 2020-05-13
- 1.0.0-beta.53 — 2020-05-12
- 1.0.0-beta.52 — 2020-05-11
- 1.0.0-beta.51 — 2020-04-29
- 1.0.0-beta.50 — 2020-04-27
- 1.0.0-beta.49 — 2020-04-23
- 1.0.0-beta.48 — 2020-04-23
- 1.0.0-beta.46 — 2020-04-15
- … 34 more at https://npm.io/package/@rax-ui/drawer/versions

## README

---
display: Drawer
family: other
---

# Drawer

抽屉组件


## API

```jsx
import Drawer from '@rax-ui/drawer';

// 普通用法
function App() {
  const [visible, setVisible] = useState(true);
  return (
    <Drawer
      height={400} // 可以不设置，默认会根据内容高度设置，设置的话可以减少计算尺寸的一步
      visible={visible}
      placement="bottom"
      onMaskClick={() => setVisible(false)}
    >
      <View>
        <Text>content</Text>
      </View>
    </Drawer>
  );
}

// portal: 使用 createPortal
function CustomComponent() {
  const [visible, setVisible] = useState(true);
  const portal = useRef(null);
  return (
    <View>
      <View ref={portal}></View>
      <Drawer
        portal={true}
        // portal={document.body} // 同上
        // portal={() => portal.current} // 其他节点
        visible={visible}
        placement="bottom"
        onMaskClick={() => setVisible(false)}
      >
        <View>
          <Text>content</Text>
        </View>
      </Drawer>
    </View>
  );
}

// keepAlive: 保存状态（隐藏时不删除）
function App() {
  const [visible, setVisible] = useState(true);
  return (
    <Drawer
      keepAlive={true}
      visible={visible}
      placement="bottom"
      onMaskClick={() => setVisible(false)}
    >
      {// 保存已输入的值}
      <TextInput />
    </Drawer>
  );
}
```

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| visible | 是否显示 | boolean | false |
| placement | 抽屉放置的位置 | top/bottom/left/right | right |
| width | 宽度（left/right 时配置） | string/number | auto |
| height | 高度（top/bottom 时配置） | string/number | auto |
| keepMounted | 是否隐藏时不删除 | boolean | false |
| disableBackdropClose | 是否禁用背景点击关闭 | boolean | false |
| onShow | 显示时回调 | () => void | |
| onHide | 隐藏时回调 | () => void | |
| onEnter | 开始进入时回调函数 | () => void |  |
| onExit | 开始退出时回调函数 | () => void |  |
| onEntering | 正在进入时回调函数 | () => void |  |
| onExiting | 正在退出时回调函数 | () => void |  |
| onEntered | 进入后回调函数 | () => void |  |
| onExited | 退出后回调函数 | () => void |  |
| onBackdropClick | 遮盖背景被点击时调用 | () => void |  |


### CSS API

> 继承 Modal

| 名称 | 说明 |
|:---------------|:--------|
| `drawer` | 抽屉盒子 |

---
_Source: https://npm.io/package/@rax-ui/drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._