警告对话框

一个模式对话框，会打断用户操作，显示重要内容并期待用户回应。

import {
  AlertDialog,
  AlertDialogAction,

安装


pnpm dlx shadcn@latest add alert-dialog

用法

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

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">显示对话框</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>您确定要继续吗？</AlertDialogTitle>
      <AlertDialogDescription>
        此操作无法撤销。这将永久删除您在我们服务器上的账户。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>取消</AlertDialogCancel>
      <AlertDialogAction>继续</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

示例

基础示例

一个基础警告对话框，包含标题、描述，以及取消和继续按钮。

import {
  AlertDialog,
  AlertDialogAction,

小尺寸

使用 size="sm" 属性使警告对话框更小。

import {
  AlertDialog,
  AlertDialogAction,

媒体元素

使用 AlertDialogMedia 组件为警告对话框添加媒体元素，如图标或图片。

import {
  AlertDialog,
  AlertDialogAction,

小尺寸带媒体元素

使用 size="sm" 属性使警告对话框更小，并使用 AlertDialogMedia 组件添加媒体元素，如图标或图片。

import {
  AlertDialog,
  AlertDialogAction,

危险操作

使用 AlertDialogAction 组件为警告对话框添加危险操作按钮。

import {
  AlertDialog,
  AlertDialogAction,

API 参考

size

在 AlertDialogContent 组件上使用 size 属性来控制警告对话框的大小。它接受以下值：

属性	类型	默认值
`size`	`"default" \| "sm"`	`"default"`

有关其它组件及其属性的更多信息，请参见 Radix UI 文档。

提示宽高比

安装用法示例基础示例小尺寸媒体元素小尺寸带媒体元素危险操作 API 参考 size