抽屉 Drawer

一个封装自 vaul 的 React 抽屉组件，支持底部弹出、遮罩层、标题、内容、页脚等常见功能，样式基于 TailwindCSS 并可自定义扩展。

---

📦 引入方式

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@npmqg/react-ui-drawer';

---

🧩 使用示例

示例

源码

<Drawer>
  <DrawerTrigger>
    <button className="btn">打开抽屉</button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>标题</DrawerTitle>
      <DrawerDescription>这里是副标题说明。</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p>这是抽屉的内容区域。</p>
    </div>
    <DrawerFooter>
      <DrawerClose>
        <button className="btn btn-outline">取消</button>
      </DrawerClose>
      <button className="btn btn-primary">确认</button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

---

✨ 组件列表

组件名	描述
Drawer	根组件，管理抽屉的打开与关闭状态，必须包裹相关子组件
DrawerTrigger	用于触发抽屉打开的元素（如按钮）
DrawerPortal	将抽屉内容渲染到 body 外层，常用于实现模态浮层效果
DrawerOverlay	抽屉背后的遮罩层，点击可关闭抽屉，通常用于聚焦抽屉内容
DrawerContent	抽屉内容容器，支持动画和结构布局
DrawerHeader	抽屉顶部区域，推荐放置 DrawerTitle 和 DrawerDescription
DrawerFooter	抽屉底部区域，通常用于放置操作按钮，支持响应式布局
DrawerTitle	抽屉标题文本，通常放在 DrawerHeader 中
DrawerDescription	抽屉描述文本，通常补充说明内容，也放在 DrawerHeader 中
DrawerClose	用于关闭抽屉的按钮，可自定义位置与样式

---

💡 提示

• 所有组件已使用 forwardRef，可安全传递 ref。
• DrawerContent 使用 bottom sheet 风格，适用于移动端。
• 可结合 z-index 与 portal 插槽控制弹出层层级。