Dialog

基于原生 <dialog> 元素的模态弹窗——自动处理滚动锁定和点击背景关闭。

安装

npx @cloudflare/nimbus-docs add dialog

yarn dlx @cloudflare/nimbus-docs add dialog

pnpm dlx @cloudflare/nimbus-docs add dialog

bunx @cloudflare/nimbus-docs add dialog

预览

模态弹窗在页面上方打开；点击背景或取消按钮可关闭。

<button onclick="document.getElementById('demo').showModal()">打开对话框</button>

<Dialog id="demo">
<DialogContent class="max-w-md">
  <div class="p-6 flex flex-col gap-3">
    <h3 class="text-base font-semibold">确认部署</h3>
    <p class="text-sm text-muted-foreground">生产环境将从当前 main 分支重新构建。</p>
    <div class="flex justify-end gap-2 mt-2">
      <DialogClose class="px-3 py-1.5 rounded-md border border-border text-sm">取消</DialogClose>
      <DialogClose class="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm">部署</DialogClose>
    </div>
  </div>
</DialogContent>
</Dialog>

示例

确认对话框

一个简单的确认/取消对话框，使用两个 DialogClose 按钮作为操作按钮。

<button onclick="document.getElementById('confirm').showModal()">删除项目</button>

<Dialog id="confirm">
<DialogContent class="max-w-sm">
  <div class="p-6">
    <h3 class="text-base font-semibold mb-2">确定吗？</h3>
    <p class="text-sm text-muted-foreground mb-4">此操作无法撤销。</p>
    <div class="flex justify-end gap-2">
      <DialogClose class="px-3 py-1.5 rounded-md border border-border text-sm">取消</DialogClose>
      <DialogClose class="px-3 py-1.5 rounded-md bg-danger text-white text-sm">删除</DialogClose>
    </div>
  </div>
</DialogContent>
</Dialog>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`id`	`string`