Dialog 模态窗口

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

导入

import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, Label } from 'moriui'

示例

概览

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

<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>

自定义关闭按钮

使用 DialogClose 替换默认关闭控件。

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

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button variant="outline">
        分享
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>分享链接</DialogTitle>
        <DialogDescription>拥有此链接的人可以查看此内容。</DialogDescription>
      </DialogHeader>
      <div class="flex items-center gap-2">
        <div class="grid flex-1 gap-2">
          <Label for="link" class="sr-only">链接</Label>
          <Input id="link" default-value="https://ui.shadcn.com/docs/installation" readonly />
        </div>
      </div>
      <DialogFooter class="sm:justify-start">
        <DialogClose as-child>
          <Button type="button">
            关闭
          </Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

无关闭按钮

隐藏默认关闭按钮。

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

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button variant="outline">
        编辑
      </Button>
    </DialogTrigger>
    <DialogContent show-close-button="false">
      <DialogHeader>
        <DialogTitle>无关闭按钮</DialogTitle>
        <DialogDescription>用户必须通过其他操作关闭此对话框。</DialogDescription>
      </DialogHeader>
      <p class="text-sm text-muted-foreground">
        内容区域
      </p>
    </DialogContent>
  </Dialog>
</template>

固定底部

操作栏固定在底部。

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

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button variant="outline">
        编辑资料
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>编辑资料</DialogTitle>
        <DialogDescription>修改以下内容。</DialogDescription>
      </DialogHeader>
      <div class="grid gap-4 py-4">
        <p v-for="i in 6" :key="i" class="h-8 rounded bg-muted" />
      </div>
      <DialogFooter>
        <Button type="submit">
          保存
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

可滚动内容

长内容在固定头部下方滚动。

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

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button variant="outline">
        查看条款
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>服务条款</DialogTitle>
        <DialogDescription>请仔细阅读以下条款。</DialogDescription>
      </DialogHeader>
      <div class="grid gap-4">
        <p v-for="i in 20" :key="i" class="text-sm text-muted-foreground">
          这是第 {{ i }} 条条款的内容。请仔细阅读并确认同意。
        </p>
      </div>
    </DialogContent>
  </Dialog>
</template>

RTL

从右到左的对话框内容。

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

<template>
  <DirectionProvider dir="rtl">
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">
          فتح
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>حوار</DialogTitle>
          <DialogDescription>هذا حوار في الاتجاه من اليمين إلى اليسار.</DialogDescription>
        </DialogHeader>
        <p class="text-sm text-muted-foreground">
          محتوى الحوار هنا.
        </p>
      </DialogContent>
    </Dialog>
  </DirectionProvider>
</template>

使用说明

组合方式

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

自定义关闭按钮

DialogClose 提供自定义关闭触发器，可用于替换默认关闭控件。

无关闭按钮

showCloseButton 控制默认关闭控件的显示与隐藏。

固定底部

DialogFooter 固定在底部，内容区域独立滚动，操作始终可见。

可滚动内容

长内容在固定 Header 下方滚动，适合条款等长文本。

RTL

对话框继承外围书写方向，内容随 dir 调整。

变体

DialogContent 提供统一模态表面；用 Header、Title、Description 与 Footer 组织语义结构。

可访问性

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

API 参考

属性	类型	默认值	说明
`Dialog v-model:open`	`boolean`	`undefined`	对话框的受控打开状态。
`Dialog defaultOpen`	`boolean`	`false`	非受控对话框的初始状态。
`Dialog modal`	`boolean`	`true`	是否阻断背景区域交互。
`DialogContent showCloseButton`	`boolean`	`true`	是否显示默认关闭按钮。
`DialogClose as / asChild`	`string \| Component / boolean`	`'button' / false`	关闭触发器的元素组合能力。
`DialogHeader class`	`HTMLAttributes["class"]`	`undefined`	合并到对话框头部的调用方类。
`DialogFooter class`	`HTMLAttributes["class"]`	`undefined`	合并到对话框脚部的调用方类。