Dialog

用于在当前页面上方临时集中处理一项任务。

预览

编辑个人资料

打开姓名和用户名输入，通过取消或示例保存按钮关闭对话框。

打开后可测试焦点约束和按 Escape 关闭。

安装

npx shadcn@latest add @neumorphism-ui/dialog

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

编辑个人资料

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dialog @neumorphism-ui/input @neumorphism-ui/label

Registry JSON

用法

在 Dialog 内组合 DialogTrigger 与 DialogContent，并提供标题和说明。取消使用 DialogClose，主要操作连接到应用的处理函数。

"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Project details</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Team workspace</DialogTitle>
          <DialogDescription>Manage your projects in one place.</DialogDescription>
        </DialogHeader>
        <DialogFooter><DialogClose render={<Button />}>Close</DialogClose></DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

API 参考

基于 Base UI Dialog 组合 Portal、Backdrop、Popup、标题、说明和关闭操作。Escape、点击外部、焦点约束及焦点返回均由 primitive 处理。

组件	属性	类型	默认值	说明
`Dialog`	`open / defaultOpen`	`boolean`	`false`	受控的打开状态或非受控初始状态。
`Dialog`	`onOpenChange`	`(open: boolean) => void`	`—`	打开状态变化时调用。
`Dialog`	`modal`	`boolean`	`true`	决定是否阻止背景交互并约束焦点。
`DialogTrigger / DialogClose`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	将触发或关闭行为组合到按钮或链接上。
`DialogContent`	`showCloseButton`	`boolean`	`true`	显示右上角的默认关闭按钮。
`DialogContent`	`overlayClassName`	`string \| (state) => string`	`—`	单独扩展 Backdrop 的颜色、模糊和过渡效果。
`Dialog`	`disablePointerDismissal`	`boolean`	`false`	禁止通过外部 pointer press 关闭 Dialog。

预览

编辑个人资料

安装

用法

API 参考

无障碍