AlertDialog.tsx

基本信息

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

功能描述

警告对话框组件，用于需要用户确认的重要操作。基于 Radix UI 的 Alert Dialog 原语，支持动画效果和自定义样式。

导出内容

AlertDialog - 对话框根组件
AlertDialogPortal - 门户组件
AlertDialogOverlay - 遮罩层组件
AlertDialogTrigger - 触发器组件
AlertDialogContent - 内容容器组件
AlertDialogHeader - 头部区域组件
AlertDialogFooter - 底部区域组件
AlertDialogTitle - 标题组件
AlertDialogDescription - 描述组件
AlertDialogAction - 确认操作按钮
AlertDialogCancel - 取消按钮

Props 接口

AlertDialog

属性	类型	必填	默认值	说明
...props	`React.ComponentProps<typeof AlertDialogPrimitive.Root>`	否	-	Radix UI Alert Dialog 根组件属性

AlertDialogContent

属性	类型	必填	默认值	说明
className	`string`	否	-	自定义CSS类名
...props	`React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>`	否	-	其他Content属性

AlertDialogHeader / AlertDialogFooter

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

AlertDialogAction / AlertDialogCancel

属性	类型	必填	默认值	说明
className	`string`	否	-	自定义CSS类名
...props	`React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action/Cancel>`	否	-	按钮原生属性

依赖

@radix-ui/react-alert-dialog - Radix UI 警告对话框原语
@/lib/utils - 工具函数 (cn)
@/components/ui/button - 按钮组件 (buttonVariants)
lucide-react - 图标库

使用示例

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">删除账户</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>确定要删除账户吗？</AlertDialogTitle>
      <AlertDialogDescription>
        此操作不可撤销，您的所有数据将被永久删除。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>取消</AlertDialogCancel>
      <AlertDialogAction>确认删除</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>