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-esc"
>Dialog</mdui-dialog>

<mdui-button>開啟對話框</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  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 permanently removed from your 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 permanently removed from your 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 permanently removed from your 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 分隔線