浮层

Dialog 模态窗口

用于模态窗口场景的 MoriUI 组件。

资源

导入

import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from 'moriui'

组合方式

使用 Dialog、DialogTrigger 和 DialogContent 组织模态窗口；内容内可使用 Header、Title、Description 与 Footer 提供清晰结构。

示例

概览

在不中断当前上下文的情况下展示聚焦任务。

<script setup lang="ts">
  import {
    Button,
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger
  } from 'moriui'
</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button>查看详情</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader><DialogTitle>保持上下文</DialogTitle><DialogDescription>对话框会管理焦点，并允许用户按 Escape 返回页面。</DialogDescription></DialogHeader>
      <p class="text-sm text-muted-foreground">
        把需要立即关注的短任务放在这里。
      </p>
      <DialogFooter><Button>知道了</Button></DialogFooter>
    </DialogContent>
  </Dialog>
</template>

API

属性	类型	默认值	说明
Dialog v-model:open	`boolean`	`undefined`	对话框的受控打开状态。
Dialog defaultOpen	`boolean`	`false`	非受控对话框的初始状态。
Dialog modal	`boolean`	`true`	是否阻断背景区域交互。
DialogContent showCloseButton	`boolean`	`true`	是否显示默认关闭按钮。

无障碍说明

Dialog 复用 Reka UI 的焦点管理、Escape 关闭、遮罩交互和触发器焦点归还。DialogContent 内应提供 DialogTitle，并在需要补充说明时提供 DialogDescription。

关联组件

确认对话抽屉面板