Dialog
Dialog 基于原生 <dialog> 元素构建模态界面，并提供标题、正文、图标和操作插槽。
Dialog 中的所有操作都使用文本按钮，包括主要、确认、最终和破坏性操作。请通过清晰的文案、顺序和位置体现操作层级，不要使用填充、色调或描边容器来强调。
关闭 lifecycle
原生对话框关闭时会触发 update:open(false) 和 close。请用它们更新控制对话框开关状态的应用状态。Dialog 自身的视觉退出效果（包括背景遮罩）完成后会触发 closed，其返回值与 close 收到的原生对话框返回值相同。该事件不会等待插槽内容中的动画。若没有动画或启用了减少动态效果，closed 会异步触发，不依赖超时。
退出动画期间请保留插槽数据，并在 closed 中释放：
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
const open = ref(false);
const selectedItem = shallowRef<{ name: string } | null>(null);
function request关闭() {
open.value = false;
}
function clearDialogContent() {
selectedItem.value = null;
}
</script>
<template>
<Dialog v-model:open="open" @closed="clearDialogContent">
<template #headline>{{ selectedItem?.name }}</template>
<Button variant="text" @click="request关闭">关闭</Button>
</Dialog>
</template>宽度
使用 width 属性设置对话框表面的宽度。
<Dialog width="28rem" />若要通过样式表自定义宽度，请在 Dialog 根元素上设置 --md-dialog-container-width。根原生 <dialog> 仍保持全屏，以确保背景点击和模态定位正常工作；该 token 控制内部表面的宽度。
<Dialog class="wide-dialog" />.wide-dialog {
--md-dialog-container-width: 40rem;
}可滚动内容
内容部件可独立滚动，同时会在块轴边缘保留常见的后代元素视觉溢出。有关 Dialog 和弹出层的通用约定及其自定义 token，请参阅可滚动内容的视觉溢出。
示例
默认
带图标
浮动表面
共享主题颜色、边框、阴影，以及包含嵌套菜单和对话框的交互式示例，请参阅浮动表面 token。
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<dialog> | root | [data-scope="dialog"][data-part="root"]鼠标左键单击复制 |
<div> | surface | [data-scope="dialog"][data-part="surface"]鼠标左键单击复制 |
<div> | icon条件显示 | [data-scope="dialog"][data-part="icon"]鼠标左键单击复制 |
<h2> | headline条件显示 | [data-scope="dialog"][data-part="headline"]鼠标左键单击复制 |
<div> | content条件显示 | [data-scope="dialog"][data-part="content"]鼠标左键单击复制 |
<div> | actions条件显示 | [data-scope="dialog"][data-part="actions"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
shape可选 | Corner style; inherits the shared shape default. M3Shape | undefined | - | - |
closeOnBackdrop可选 | Whether clicking the backdrop closes the dialog. boolean | undefined | true | |
width可选 | Dialog surface width. Such as '28rem'. string | undefined | undefined | |
open可选 | - boolean | undefined | false |
事件4
| 名称 | 类型 | 说明 |
|---|---|---|
close | [returnValue: string] | - |
update:open | [value: boolean] | - |
cancel | [event: Event] | - |
closed | [returnValue: string] | - |
插槽4
| 名称 | 参数 | 说明 |
|---|---|---|
icon | - | Optional leading icon content. |
headline | - | Optional dialog headline. |
default | - | Supporting text or custom body content. |
actions | - | Action buttons row. |
样式26
| Token | 说明 |
|---|---|
--md-dialog-action-label-text-colorColor回退值 var(--md-sys-color-primary) | Controls action label text color. |
--md-dialog-action-label-text-fontTypography回退值 var(--md-sys-typescale-label-large-font) | Controls action label text font. |
--md-dialog-action-label-text-line-heightTypography回退值 var(--md-sys-typescale-label-large-line-height) | Controls action label text line height. |
--md-dialog-action-label-text-sizeLayout回退值 var(--md-sys-typescale-label-large-size) | Controls action label text size. |
--md-dialog-action-label-text-trackingTypography回退值 var(--md-sys-typescale-label-large-tracking) | Controls action label text tracking. |
--md-dialog-action-label-text-typeTypography回退值 var(--md-sys-typescale-label-large) | Controls action label text type. |
--md-dialog-action-label-text-weightTypography回退值 var(--md-sys-typescale-label-large-weight) | Controls action label text weight. |
--md-dialog-container-colorColor回退值 var(--md-sys-color-surface-container-high) | Controls container color. |
--md-dialog-container-elevationElevation回退值 var(--md-sys-elevation-level3) | Controls container elevation. |
--md-dialog-container-shapeShape回退值 var(--md-shape-overlay) | Controls container shape. |
--md-dialog-headline-colorColor回退值 var(--md-sys-color-on-surface) | Controls headline color. |
--md-dialog-headline-fontTypography回退值 var(--md-sys-typescale-headline-small-font) | Controls headline font. |
--md-dialog-headline-line-heightTypography回退值 var(--md-sys-typescale-headline-small-line-height) | Controls headline line height. |
--md-dialog-headline-sizeLayout回退值 var(--md-sys-typescale-headline-small-size) | Controls headline size. |
--md-dialog-headline-trackingTypography回退值 var(--md-sys-typescale-headline-small-tracking) | Controls headline tracking. |
--md-dialog-headline-typeTypography回退值 var(--md-sys-typescale-headline-small) | Controls headline type. |
--md-dialog-headline-weightTypography回退值 var(--md-sys-typescale-headline-small-weight) | Controls headline weight. |
--md-dialog-supporting-text-colorColor回退值 var(--md-sys-color-on-surface-variant) | Controls supporting text color. |
--md-dialog-supporting-text-fontTypography回退值 var(--md-sys-typescale-body-medium-font) | Controls supporting text font. |
--md-dialog-supporting-text-line-heightTypography回退值 var(--md-sys-typescale-body-medium-line-height) | Controls supporting text line height. |
--md-dialog-supporting-text-sizeLayout回退值 var(--md-sys-typescale-body-medium-size) | Controls supporting text size. |
--md-dialog-supporting-text-trackingTypography回退值 var(--md-sys-typescale-body-medium-tracking) | Controls supporting text tracking. |
--md-dialog-supporting-text-typeTypography回退值 var(--md-sys-typescale-body-medium) | Controls supporting text type. |
--md-dialog-supporting-text-weightTypography回退值 var(--md-sys-typescale-body-medium-weight) | Controls supporting text weight. |
--md-dialog-with-icon-icon-colorColor回退值 var(--md-sys-color-secondary) | Controls with icon icon color. |
--md-dialog-with-icon-icon-sizeLayout回退值 1.5rem | Controls with icon icon size. |