dialog

dialog 函式是對 <mdui-dialog> 元件的封裝，使用該函式，你無需編寫元件的 HTML 程式碼，就能開啟一個對話框。

使用方式

按需引入函式：

import { dialog } from 'mdui/functions/dialog.js';

使用範例：

open

<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { dialog } from "mdui/functions/dialog.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    dialog({
      headline: "對話框標題",
      description: "對話框說明",
      actions: [
        {
          text: "取消",
        },
        {
          text: "確定",
          onClick: () => {
            console.log("已確認");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

函式接收一個 Options 物件作為參數；回傳值為 <mdui-dialog> 元件實例。

Options

屬性名稱	類型	預設值
`headline`	`string`	-
dialog 的標題
`description`	`string`	-
dialog 的說明文字
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
dialog 中的 body 內容，可以是 HTML 字串、DOM 元素、或 JQ 物件。
`icon`	`string`	-
dialog 頂部的 Material Icons 圖示名稱
`closeOnEsc`	`boolean`	`false`
是否在按下 ESC 鍵時，關閉 dialog
`closeOnOverlayClick`	`boolean`	`false`
是否在點擊遮罩層時，關閉 dialog
`actions`	`Action[]`	-
底部操作按鈕陣列
`stackedActions`	`boolean`	`false`
是否垂直排列底部操作按鈕
`queue`	`string`	-
佇列名稱。預設不啟用佇列，在多次呼叫該函式時，將同時顯示多個 dialog。可在該參數中傳入一個佇列名稱，具有相同佇列名稱的 dialog 函式，將在上一個 dialog 關閉後才開啟下一個 dialog。 `dialog()`、`alert()`、`confirm()`、`prompt()` 這四個函式的佇列名稱若相同，則也將互相共用同一個佇列。
`onOpen`	`(dialog: Dialog) => void`	-
dialog 開始開啟時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onOpened`	`(dialog: Dialog) => void`	-
dialog 開啟動畫完成時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onClose`	`(dialog: Dialog) => void`	-
dialog 開始關閉時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onClosed`	`(dialog: Dialog) => void`	-
dialog 關閉動畫完成時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onOverlayClick`	`(dialog: Dialog) => void`	-
點擊遮罩層時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。

Action

屬性名稱	類型	預設值
`text`	`string`	-
按鈕文字
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
點擊按鈕時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。預設點擊按鈕後會關閉 dialog；若回傳值為 `false`，則不關閉 dialog；若回傳值為 promise，則將在 promise 被解析（resolve）後，關閉 dialog。

jq 工具庫

alert