Dialog

Dialog 是对 @base-ui/react/dialog 的封装，提供模态对话框功能。

引入

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogOverlay,
  DialogPortal,
} from "aui-components";

基本用法

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogTitle>Edit Profile</DialogTitle>
    <DialogDescription>Make changes to your profile here.</DialogDescription>
    <DialogFooter>
      <DialogClose>Cancel</DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

子组件

子组件	说明
`Dialog`	根容器，管理 open/close 状态
`DialogTrigger`	触发打开的元素
`DialogPortal`	Portal 容器
`DialogOverlay`	背景遮罩
`DialogContent`	对话框内容面板
`DialogHeader`	头部容器
`DialogFooter`	底部容器
`DialogTitle`	标题
`DialogDescription`	描述文字
`DialogClose`	关闭按钮

Props

属性	类型	默认值	说明
`open`	`enum`	—	Whether the dialog is currently open.
`defaultOpen`	`enum`	`false`	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
`modal`	`enum`	`true`	Determines if the dialog enters a modal state when open. - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled. When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so touch screen readers can escape the popup.
`onOpenChange`	`enum`	—	Event handler called when the dialog is opened or closed.
`onOpenChangeComplete`	`enum`	—	Event handler called after any animations complete when the dialog is opened or closed.
`disablePointerDismissal`	`enum`	`false`	Whether to prevent the dialog from closing on outside presses. For non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it.
`actionsRef`	`enum`	—	A ref to imperative actions. - `unmount`: Manually unmounts the dialog. Call this after any externally controlled closing animation finishes. - `close`: Closes the dialog imperatively when called.
`handle`	`enum`	—	A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method.
`children`	`enum`	—	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.
`triggerId`	`enum`	—	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).
`defaultTriggerId`	`enum`	—	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.

Content Props

<DialogContent
  showCloseButton={true} // 是否显示右上角关闭按钮（默认 true）
  className="sm:max-w-lg"
>
  {/* ... */}
</DialogContent>

基础用法

<DialogContent className="sm:max-w-sm">
  <DialogHeader>
    <DialogTitle>Confirm Action</DialogTitle>
    <DialogDescription>Are you sure you want to proceed?</DialogDescription>
  </DialogHeader>
  <DialogFooter showCloseButton>
    <Button variant="destructive">Delete</Button>
  </DialogFooter>
</DialogContent>

<DialogFooter
  showCloseButton={true} // 是否在 Footer 中显示关闭按钮（默认 false）
  className="gap-4"
>
  <Button>Save</Button>
</DialogFooter>

完整示例

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
} from "aui-components";
import { Button } from "aui-components";

export function DeleteDialog() {
  return (
    <Dialog>
      <DialogTrigger
        render={<Button variant="destructive">Delete Item</Button>}
      />
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Delete Item</DialogTitle>
          <DialogDescription>
            This action cannot be undone. Are you sure?
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>
            Cancel
          </DialogClose>
          <Button variant="destructive">Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Dialog

引入

基本用法

子组件

Props

Content Props

基础用法

Footer Props

完整示例

相关链接

On this page