Dialog

浮在变暗页面之上的面板，由黑色标题栏、正文与操作按钮组成。打开时从中心展开，关闭时收回得更快。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/dialog

示例

接受委托前的确认

dialog-basic.tsx

import { Button } from "@/components/zero/button";import {  Dialog,  DialogBody,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/zero/dialog";import { ArrowRightIcon } from "@/components/zero/icons";export default function DialogBasic() {  return (    <Dialog>      <DialogTrigger render={<Button />}>Take the job</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Take this job?</DialogTitle>          <DialogDescription>            Escort a sealed crate through the rail yards.          </DialogDescription>        </DialogHeader>        <DialogBody>          <p className="text-zero-text-2">            The crate has to reach the north gate before the night shift. You            can hand the job back until you pick it up.          </p>        </DialogBody>        <DialogFooter>          <DialogClose render={<Button variant="secondary" />}>            Not now          </DialogClose>          <DialogClose render={<Button />}>            Take it            <ArrowRightIcon />          </DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

行为

打开时焦点移入对话框，关闭后回到触发器；按 Esc 或点击变暗的页面即可关闭。系统开启「减少动态效果」时仅保留淡入淡出。

触发器与关闭按钮可通过 render 换成 zzzUI 的 Button，写法见示例。标题栏角落默认带有关闭按钮，设置 showClose={false} 即可隐藏。

属性

DialogContent

属性	类型	默认值	说明
showClose	boolean	true	标题栏角落的关闭按钮。
closeLabel	string	"Close"	右上角关闭按钮的可访问名称。

另可传入 Base UI Dialog.Popup 的全部属性。

Dialog

属性	类型	默认值	说明
open	boolean	—	是否打开（受控），配合 onOpenChange 使用。
defaultOpen	boolean	false	初始是否打开（非受控）。

另可传入 Base UI Dialog.Root 的全部属性。

DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter

另可传入 Base UI Dialog.Title 的全部属性。