Neumorphism UI

Alert Dialog

用于难以撤销等需要明确确认后才执行的操作。

预览

确认删除草稿

明确确认删除后执行操作，并在关闭后展示本地处理结果。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/alert-dialog

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

确认删除草稿

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/alert-dialog
Registry JSON

用法

通过标题和说明解释后果，并区分取消与确认操作。实际任务应连接到确认按钮，而非打开对话框的动作。

"use client";

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

export default function Example() {
  const [deleted, setDeleted] = useState(false);
  return (
    <div>
      <AlertDialog>
        <AlertDialogTrigger render={<Button variant="destructive" />}>Delete draft</AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogTitle>Delete this draft?</AlertDialogTitle>
          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={() => setDeleted(true)}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <p role="status">{deleted ? "Draft deleted." : "Draft available."}</p>
    </div>
  );
}

API 参考

对不可撤销操作进行明确确认的对话框。 先放置取消按钮。异步操作成功后再关闭受控对话框。

组件属性类型默认值说明
AlertDialogopen / defaultOpenboolean—设置受控状态或初始状态。
AlertDialogContentinitialFocusboolean | React.RefObject | function—选择打开时的焦点目标。
AlertDialogActiononClickReact.MouseEventHandler—处理同步确认，异步操作应控制打开状态。

无障碍

  • 01

    先放置取消按钮。异步操作成功后再关闭受控对话框。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。