Neumorphism UI
操作与浮层@neumorphism-ui/alert-dialog

Alert Dialog

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

@neumorphism-ui/alert-dialog
Registry JSON

预览

安装

安装: alert-dialognpx shadcn@latest add @neumorphism-ui/alert-dialog

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

用法: 安装npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/alert-dialog

Import

Alert Dialog import 代码
"use client";

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

Example

Alert Dialog 用法代码
export default function Example() {
  const [message, setMessage] = React.useState("");
  return (<div className="grid gap-3"><AlertDialog><AlertDialogTrigger render={<Button variant="destructive" />}>{"删除草稿"}</AlertDialogTrigger><AlertDialogContent><AlertDialogTitle>{"删除此草稿？"}</AlertDialogTitle><AlertDialogDescription>{"此操作无法撤销。请确认后继续。"}</AlertDialogDescription><AlertDialogFooter><AlertDialogCancel>{"返回"}</AlertDialogCancel><AlertDialogAction onClick={() => setMessage("草稿已删除。")}>{"删除草稿"}</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog><p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p></div>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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