120k
New

警告对话框

PreviousNext

一个会以重要内容打断用户并等待用户响应的模态对话框。

Base UIReact AriaRadix UI
import {
  AlertDialog,
  AlertDialogAction,

安装

pnpm dlx shadcn@latest add alert-dialog

用法

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
<AlertDialogTrigger>
  <Button variant="outline">显示对话框</Button>
  <AlertDialog>
    <AlertDialogHeader>
      <AlertDialogTitle>您确定要继续吗？</AlertDialogTitle>
      <AlertDialogDescription>
        此操作无法撤销。您的帐户将从我们的服务器中永久删除。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>取消</AlertDialogCancel>
      <AlertDialogAction>继续</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialog>
</AlertDialogTrigger>

组成

使用以下组成构建一个 AlertDialog：

AlertDialogTrigger
├── Button
└── AlertDialog
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

基础

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

import {
  AlertDialog,
  AlertDialogAction,

小型

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

import {
  AlertDialog,
  AlertDialogAction,

媒体

使用 AlertDialogMedia 组件向警告对话框添加图标或图像等媒体元素。

import { CircleFadingPlusIcon } from "lucide-react"

import {

带媒体的小尺寸

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

import { BluetoothIcon } from "lucide-react"

import {

危险操作

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

import { Trash2Icon } from "lucide-react"

import {

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import { BluetoothIcon } from "lucide-react"

API 参考

size

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

PropTypeDefault
size"default" | "sm""default"

有关其他组件及其 props 的更多信息，请参阅 React Aria 文档。