对话框

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

安装以下依赖：

npm install @base-ui/react

将以下代码复制到你的项目中。

View complete source: components/ui/dialog.tsx

根据项目配置更新导入路径。

用法

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Composition

Use the following composition to build a Dialog:

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Custom Close Button

Replace the default close control with your own button.

No Close Button

Use showCloseButton={false} to hide the close button.

Sticky Footer

Keep actions visible while the content scrolls.

Scrollable Content

Long content can scroll while the header stays in view.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

See the Base UI documentation for more information.