# @hi-ui/drawer > A sub-package for @hi-ui/hiui. Latest version **5.0.0** (published 2026-06-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @hi-ui/drawer pnpm add @hi-ui/drawer yarn add @hi-ui/drawer bun add @hi-ui/drawer ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.0.0 | | Published | 2026-06-06 | | First published | 2021-11-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 18 | | Unpacked size | 102.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 878 | | Author | HiUI | | Maintainers | sivan, solarjoker, lanzhi_lee, zhouyun | ## Links - npm: https://www.npmjs.com/package/@hi-ui/drawer - Repository: https://github.com/XiaoMi/hiui - Homepage: https://github.com/XiaoMi/hiui/tree/master/packages/ui/drawer#readme - Issues: https://github.com/XiaoMi/hiui/issues - npm.io page: https://npm.io/package/@hi-ui/drawer ## Dependencies (18) - [@hi-ui/env](https://npm.io/package/@hi-ui/env.md) ^5.0.0 - [@hi-ui/icons](https://npm.io/package/@hi-ui/icons.md) ^5.0.0 - [@hi-ui/modal](https://npm.io/package/@hi-ui/modal.md) ^5.0.0 - [@hi-ui/button](https://npm.io/package/@hi-ui/button.md) ^5.0.0 - [@hi-ui/portal](https://npm.io/package/@hi-ui/portal.md) ^5.0.0 - [@hi-ui/use-id](https://npm.io/package/@hi-ui/use-id.md) ^5.0.0 - [@hi-ui/classname](https://npm.io/package/@hi-ui/classname.md) ^5.0.0 - [@hi-ui/container](https://npm.io/package/@hi-ui/container.md) ^5.0.0 - [@hi-ui/use-latest](https://npm.io/package/@hi-ui/use-latest.md) ^5.0.0 - [@hi-ui/use-toggle](https://npm.io/package/@hi-ui/use-toggle.md) ^5.0.0 - [@hi-ui/icon-button](https://npm.io/package/@hi-ui/icon-button.md) ^5.0.0 - [@hi-ui/react-compat](https://npm.io/package/@hi-ui/react-compat.md) ^5.0.0 - [@hi-ui/type-assertion](https://npm.io/package/@hi-ui/type-assertion.md) ^5.0.0 - [@hi-ui/use-merge-refs](https://npm.io/package/@hi-ui/use-merge-refs.md) ^5.0.0 - [@hi-ui/use-scroll-lock](https://npm.io/package/@hi-ui/use-scroll-lock.md) ^5.0.0 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5 - [@hi-ui/use-patch-element](https://npm.io/package/@hi-ui/use-patch-element.md) ^5.0.0 - [@hi-ui/use-merge-semantic](https://npm.io/package/@hi-ui/use-merge-semantic.md) ^5.0.0 ## Recent versions - 5.0.0 (latest) — 2026-06-06 - 5.0.0-rc.0 (rc) — 2026-06-02 - 5.0.0-experimental.1 (experimental) — 2026-03-08 - 5.0.0-canary.10 (canary) — 2026-03-08 - 5.0.0-alpha.0 (alpha) — 2025-09-29 - 4.0.0-beta.39 (feature) — 2022-07-13 - 5.0.0-experimental.0 — 2026-02-05 - 5.0.0-canary.9 — 2025-12-15 - 5.0.0-canary.8 — 2025-11-19 - 5.0.0-canary.7 — 2025-11-12 - 5.0.0-canary.6 — 2025-09-18 - 5.0.0-canary.5 — 2025-08-21 - 5.0.0-canary.4 — 2025-07-06 - 5.0.0-canary.3 — 2025-07-04 - 4.3.2 — 2025-07-03 - … 91 more at https://npm.io/package/@hi-ui/drawer/versions ## README # Drawer 抽屉 模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务 ## 何时使用 当前任务中需要中途填写信息或执行别的动作 常见于后台设置、新建编辑等场景 ## 使用示例 ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------ | ------------------- | ----------------- | ------- | | title | 模态框标题 | string \| ReactNode | - | - | | visible | 是否显示模态框 | boolean | true \| false | false | | closable | 是否展示右上角关闭按钮 | boolean | true \| false | true | | maskClosable | 是否允许点击蒙层关闭抽屉 | boolean | true \| false | true | | showMask | 是否显示蒙层 | boolean | true \| false | true | | width | 自定义抽屉宽度 | number | - | 360 | | footer | 自定义抽屉底部 | ReactNode \| null | - | - | | placement | 抽屉唤起的方向 | string | 'left' \| 'right' | 'right' | ## Events | 名称 | 说明 | 类型 | 参数 | 返回值 | | ------- | -------------------- | --------------------------- | ------------------- | ------ | | onClose | 关闭事件触发时的回调 | (event: MouseEvent) => void | event: 鼠标事件对象 | - | ## CHANGELOG | 参数 | 变更类型 | 变更内容 | 解决的问题 | | -------------- | ---------- | ---------------- | ---------- | | preload | feature | | | | unmountOnClose | feature | | | | onClose | update | 去除  event 参数 | | | closeOnEsc | feature | | | | onEscKeyDown | feature | | | | closeIcon | feature | | | | lockScroll | feature | | | | timeout | feature | | | | disabledPortal | feature | | | | container | feature | | | | onExited | feature | | | | maskClosable | deprecated | | | --- _Source: https://npm.io/package/@hi-ui/drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._