Docs
对话框

对话框

一种覆盖在主窗口或另一个对话框窗口上的窗口，使下面的内容无效。

DocsAPI Reference

安装

pnpm dlx shadcn@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>

示例

自定义关闭按钮

注意事项

要在 上下文菜单 或 下拉菜单 中激活 Dialog 组件，您必须将 上下文菜单 或 下拉菜单 组件包裹在 Dialog 组件中。有关更多信息，请参阅此处的相关问题。

<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>
Date PickerDrawer