Pingo
GH

Dialog

对话框在当前内容之上打开一个模态面板，并附带遮罩。下方预览由 pingo 引擎实时渲染——点击遮罩或按 Escape 会触发 onOpenChange(false)，并跟随站点主题切换明暗。

用法

import {
  Button,
  Dialog,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@dopejs/pingo-ui";

root.render(
  <Dialog open={open} onOpenChange={(next) => setOpen(next)}>
    <DialogHeader>
      <DialogTitle>编辑资料</DialogTitle>
      <DialogDescription>修改会立即同步。</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button onPress={() => save()}>保存</Button>
    </DialogFooter>
  </Dialog>,
);

Dialog 的浮层会填满它自己的父容器（而不是视口），请把它挂载在靠近根节点的位置。open 为受控 prop：组件不持有开合状态，关闭时通过 onOpenChange(false) 通知调用方。

示例

组合区块

DialogHeader / DialogTitle / DialogDescription / DialogFooter 是纯布局与排版组件，按需组合；children 接受任意 PingoNode，表单、列表都可以放进面板。

Props

Dialog

Prop 类型 默认值 说明
open boolean — 是否打开（必填，受控）
onOpenChange (open: boolean) => void — 请求关闭/打开时回调
children PingoNode — 面板内容（必填）
className string — 追加在浮层类名之后

DialogHeader / DialogFooter

Prop 类型 默认值 说明
children PingoNode — 区块内容（必填）
className string — 追加类名

DialogTitle / DialogDescription

Prop 类型 默认值 说明
children string — 文本内容（必填）
className string — 追加类名

无障碍

面板具备 dialog 语义；打开时焦点移入面板，Escape 关闭后焦点返回触发元素。面板内的可交互元素会注册进 Tab 循环。标题请使用 DialogTitle（heading 语义）。

最后更新: