警告对话框

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

安装以下依赖：

npm install @base-ui/react

将以下代码复制到你的项目中。

View complete source: components/ui/alert-dialog.tsx

根据项目配置更新导入路径。

用法

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

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Show Dialog
  </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>

Composition

Use the following composition to build an AlertDialog:

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

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

Small

Use the size="sm" prop to make the alert dialog smaller.

Media

Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

Small with Media

Use the size="sm" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

危险操作

Use the AlertDialogAction component to add a destructive action button to the alert dialog.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

size

Use the size prop on the AlertDialogContent component to control the size of the alert dialog. It accepts the following values:

For more information about the other components and their props, see the Base UI documentation.