操作与浮层@neumorphism-ui/dialog

Dialog

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

@neumorphism-ui/dialog

Registry JSON

预览

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

安装

npx shadcn@latest add @neumorphism-ui/dialog

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

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

用法

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

Import

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

Example

<Dialog>
  <DialogTrigger render={<Button variant="primary" />}>
    创建项目
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>新项目</DialogTitle>
      <DialogDescription>
        之后仍可修改名称和说明。
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="soft" />}>取消</DialogClose>
      <Button variant="primary">创建</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API 参考

组件	属性	类型	默认值	说明
`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。

预览

安装

用法

Import

Example

API 参考

无障碍