Dialog 对话框

对话框用于在用户的操作流程中提供重要提示。

除了直接使用该组件外,mdui 还提供了四个函数:mdui.dialogmdui.alertmdui.confirmmdui.prompt。这些函数可以简化 Dialog 组件的使用。

使用方法

按需导入组件:

import 'mdui/components/dialog.js';

按需导入组件的 TypeScript 类型:

import type { Dialog } from 'mdui/components/dialog.js';

使用示例:

Dialog 关闭 打开对话框
<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>关闭</mdui-button>
</mdui-dialog>

<mdui-button>打开对话框</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

示例

点击遮罩关闭

添加 close-on-overlay-click 属性,点击遮罩层时会关闭对话框。

按下 ESC 键关闭

添加 close-on-esc 属性,按下 ESC 键时会关闭对话框。

全屏

添加 fullscreen 属性,对话框会全屏显示。

图标

设置 icon 属性,对话框上方会添加 Material Icons 图标。

也可以通过 icon slot 在对话框上方添加图标元素。

标题与描述

通过 headlinedescription 属性设置对话框的标题和描述。

也可以通过 headlinedescription slot 来设置对话框的标题元素和描述元素。

底部操作按钮

可以通过 action slot 添加底部操作按钮。

添加 stacked-actions 属性,使底部操作按钮垂直排列。

顶部内容

可以通过 header slot 设置对话框顶部内容。

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
iconiconstring-

顶部的 Material Icons 图标名。也可以通过 slot="icon" 设置

headlineheadlinestring-

标题。也可以通过 slot="headline" 设置

descriptiondescriptionstring-

标题下方的文本。也可以通过 slot="description" 设置

openopenbooleanfalse

是否打开对话框

fullscreenfullscreenbooleanfalse

是否全屏显示对话框

close-on-esccloseOnEscbooleanfalse

是否允许按下 ESC 键关闭对话框

close-on-overlay-clickcloseOnOverlayClickbooleanfalse

是否允许点击遮罩层关闭对话框

stacked-actionsstackedActionsbooleanfalse

是否垂直排列底部操作按钮

事件

名称
open

对话框开始打开时触发。可以通过调用 event.preventDefault() 阻止对话框打开

opened

对话框打开动画完成后触发

close

对话框开始关闭时触发。可以通过调用 event.preventDefault() 阻止对话框关闭

closed

对话框关闭动画完成后触发

overlay-click

点击遮罩层时触发

Slots

名称
header

顶部元素,默认包含 icon slot 和 headline slot

icon

顶部图标

headline

顶部标题

description

标题下方的文本

默认

对话框主体内容

action

底部操作栏中的元素

CSS Parts

名称
overlay

遮罩层

panel

对话框容器

header

对话框 header 部分,包含 icon 和 headline

icon

顶部图标,位于 header 中

headline

顶部标题,位于 header 中

body

对话框 body 部分

description

副文本部分,位于 body 中

action

底部操作按钮

CSS 自定义属性

名称
--shape-corner

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

--z-index

组件的 CSS z-index

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库