Dialog.tsx

基本信息

类型: React 组件 (shadcn/ui)
路径: ./src/components/ui/dialog.tsx

功能描述

对话框组件，用于显示模态窗口。支持自定义关闭按钮、动画效果、头部/底部布局。

导出内容

Dialog - 对话框根组件
DialogTrigger - 触发器
DialogPortal - 门户
DialogClose - 关闭按钮
DialogOverlay - 遮罩层
DialogContent - 内容容器
DialogHeader - 头部区域
DialogFooter - 底部区域
DialogTitle - 标题
DialogDescription - 描述

Props 接口

Dialog

属性	类型	必填	默认值	说明
open	`boolean`	否	-	是否打开
onOpenChange	`(open: boolean) => void`	否	-	状态变化回调
...props	`React.ComponentProps<typeof DialogPrimitive.Root>`	否	-	Radix Dialog 属性

DialogContent

属性	类型	必填	默认值	说明
showCloseButton	`boolean`	否	`true`	是否显示关闭按钮
className	`string`	否	-	自定义CSS类名
...props	`React.ComponentProps<typeof DialogPrimitive.Content>`	否	-	Content 属性

DialogHeader / DialogFooter

属性	类型	必填	默认值	说明
className	`string`	否	-	自定义CSS类名
...props	`React.ComponentProps<'div'>`	否	-	div属性

依赖

@radix-ui/react-dialog - Radix UI 对话框原语
lucide-react - 图标库 (XIcon)
@/lib/utils - 工具函数 (cn)

使用示例

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger asChild>
    <Button>打开对话框</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>编辑个人资料</DialogTitle>
      <DialogDescription>
        在此处更改您的个人资料信息。
      </DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      {/* 表单内容 */}
    </div>
    <DialogFooter>
      <Button type="submit">保存更改</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

// 受控模式
const [open, setOpen] = useState(false);
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent showCloseButton={false}>
    {/* 内容 */}
  </DialogContent>
</Dialog>