对话框 Dialog

一个覆盖在主窗口或另一个对话框窗口上的窗口，使其下方内容不可交互。

import { Button } from "@/components/ui/button"
import {
  Dialog,

安装


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>

示例

自定义关闭按钮

替换默认关闭控件为你自己的按钮。

import { Button } from "@/components/ui/button"
import {
  Dialog,

无关闭按钮

使用 showCloseButton={false} 来隐藏关闭按钮。

import { Button } from "@/components/ui/button"
import {
  Dialog,

粘性页脚

让操作按钮在内容滚动时始终可见。

import { Button } from "@/components/ui/button"
import {
  Dialog,

可滚动内容

内容较长时可以滚动，标题依然保持可见。

import { Button } from "@/components/ui/button"
import {
  Dialog,

说明

若要在 Context Menu（上下文菜单）或 Dropdown Menu（下拉菜单）内使用 Dialog 组件，必须将 Context Menu 或 Dropdown Menu 组件包裹在 Dialog 组件内。

components/example-dialog-context-menu.tsx

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

API 参考

更多信息请参阅 Radix UI 文档。

日期选择器 Date Picker 抽屉

安装使用示例自定义关闭按钮无关闭按钮粘性页脚可滚动内容说明 API 参考