对话框 Dialog

封装自 @radix-ui/react-dialog，并结合了自定义样式和动画。

---

📦 引入方式

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@npmqg/react-ui-dialog';

---

🧩 使用示例

示例

源码

<Dialog>
  <DialogTrigger>
    <button>打开对话框</button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
      <DialogDescription>这是一个对话框的描述。</DialogDescription>
    </DialogHeader>
    <div>这里是对话框的内容部分。</div>
    <DialogFooter>
      <DialogClose>
        <button className="btn">关闭</button>
      </DialogClose>
      <button className="btn btn-primary">确认</button>
    </DialogFooter>
  </DialogContent>
</Dialog>

---

📚 API 参考

组件名	描述
Dialog	根组件，必须包裹 DialogTrigger 和 DialogContent
DialogTrigger	触发对话框打开的按钮或元素
DialogContent	对话框内容容器，支持动画和关闭按钮（右上角）
DialogHeader	用于对话框顶部区域，推荐放置 DialogTitle 和 DialogDescription
DialogFooter	用于底部按钮区域，支持响应式布局
DialogTitle	标题文本，通常放在 DialogHeader 中
DialogDescription	描述文本，通常放在 DialogHeader 中
DialogClose	用于关闭对话框的按钮（可自定义位置）

---

✨ 特性

• 支持动画的对话框
• 可自定义 Header、Footer、Title、Description
• 包含关闭按钮
• 响应式设计
• 使用 Portal 进行挂载

---

🖌️ 样式说明

组件默认包含如下动画与样式类：

• fade-in-0, fade-out-0
• zoom-in-95, zoom-out-95
• slide-in-from-top, slide-out-to-left 等
• 你可以通过 className 参数自定义覆盖这些样式。