109k
新建

警告对话框 (Alert Dialog)

上一个下一个

一个模态对话框，用于通过重要内容中断用户并期望其做出响应。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
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">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</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,

RTL (从右至左)

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

"use client"

import * as React from "react"

API 参考

size (尺寸)

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

属性类型默认
size (尺寸)"default" | "sm""default"

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