Docs
对话框

对话框

一个覆盖在主窗口或另一个对话框窗口上的窗口，将底层内容呈现为惰性。

DocsAPI Reference

安装

npx shadcn-ui@latest add dialog

使用

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
<Dialog>
  <DialogTrigger>打开</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>你绝对确定吗？</DialogTitle>
      <DialogDescription>
        此操作无法撤销。这会永久删除你的帐户，并将你的数据从我们的服务器中移除。
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

示例

自定关闭按钮

附注

要在“右键菜单”或“下拉菜单”中激活“对话框”组件，你必须将“右键菜单”或“下拉菜单”组件封装在“对话框”组件中。有关更多信息，请参阅此处链接的问题here。

<Dialog>
  <ContextMenu>
    <ContextMenuTrigger>右键单击</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>打开</ContextMenuItem>
      <ContextMenuItem>下载</ContextMenuItem>
      <DialogTrigger asChild>
        <ContextMenuItem>
          <span>删除</span>
        </ContextMenuItem>
      </DialogTrigger>
    </ContextMenuContent>
  </ContextMenu>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>你绝对确定吗？</DialogTitle>
      <DialogDescription>
        此操作无法撤销。你确定要从此服务器永久删除此文件吗？
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">确定</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>