Dialog 对话框

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

除了直接使用该组件外，mdui 还提供了四个函数：mdui.dialog、mdui.alert、mdui.confirm、mdui.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 属性，点击遮罩层时会关闭对话框。

Dialog

打开对话框

<mdui-dialog close-on-overlay-click class="example-overlay">Dialog</mdui-dialog>

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

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

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

源码

按下 ESC 键关闭

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

Dialog

打开对话框

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-ecs"
>Dialog</mdui-dialog>

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

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

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

源码

全屏

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

Dialog 关闭

打开对话框

<mdui-dialog fullscreen class="example-fullscreen">
  Dialog
  <mdui-button>关闭</mdui-button>
</mdui-dialog>

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

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

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

源码

图标

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

Dialog

打开对话框

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialog</mdui-dialog>

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

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

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

源码

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

Dialog

打开对话框

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

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

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

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

源码

标题与描述

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

打开对话框

<mdui-dialog
  headline="Delete selected images?"
  description="Images will be permenantly removed from you account and all synced devices."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

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

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

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

源码

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

Delete selected images? Images will be permenantly removed from you account and all synced devices.

打开对话框

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Delete selected images?</span>
  <span slot="description">Images will be permenantly removed from you account and all synced devices.</span>
</mdui-dialog>

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

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

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

源码

底部操作按钮

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

取消

删除

打开对话框

<mdui-dialog
  close-on-overlay-click
  headline="Delete selected images?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">取消</mdui-button>
  <mdui-button slot="action" variant="tonal">删除</mdui-button>
</mdui-dialog>

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

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

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

源码

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

Turn on speed boost

No thanks

打开对话框

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Use location service?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Turn on speed boost</mdui-button>
  <mdui-button slot="action" variant="text">No thanks</mdui-button>
</mdui-dialog>

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

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

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

源码

顶部内容

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

Title

Save

打开对话框

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
    <mdui-button variant="text">Save</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

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

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

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

源码

API

属性

HTML 属性	JavaScript 属性	类型	默认值
`icon`	`icon`	`string`	-
顶部的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
`headline`	`headline`	`string`	-
标题。也可以通过 `slot="headline"` 设置
`description`	`description`	`string`	-
标题下方的文本。也可以通过 `slot="description"` 设置
`open`	`open`	`boolean`	`false`
是否打开对话框
`fullscreen`	`fullscreen`	`boolean`	`false`
是否全屏显示对话框
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
是否允许按下 ESC 键关闭对话框
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
是否允许点击遮罩层关闭对话框
`stacked-actions`	`stackedActions`	`boolean`	`false`
是否垂直排列底部操作按钮

事件

名称
`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` 值

Collapse 折叠面板

Divider 分割线