106k
New

对话框

PreviousNext

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

Radix UIBase UI
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,

API 参考

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