prompt

prompt 函式是對 <mdui-dialog> 元件的封裝，可用來取代系統原生的 window.prompt 函式。使用該函式，你無需編寫元件的 HTML 程式碼，就能開啟一個可輸入文字的對話框。

使用方式

按需引入函式：

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

使用範例：

open

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

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

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

  button.addEventListener("click", () => {
    prompt({
      headline: "提示標題",
      description: "提示說明",
      confirmText: "確定",
      cancelText: "取消",
      onConfirm: (value) => console.log("已確認: " + value),
      onCancel: () => console.log("已取消"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

函式的參數為 Options 物件；回傳值為 Promise，如果是透過點擊確定按鈕關閉對話框，則 Promise 會被 resolve，resolve 的參數為輸入框的值，如果是透過其他方式關閉對話框，則 Promise 會被 reject。

Options

屬性名稱	類型	預設值
`headline`	`string`	-
prompt 的標題
`description`	`string`	-
prompt 的說明
`icon`	`string`	-
prompt 頂部的 Material Icons 圖示名稱
`closeOnEsc`	`boolean`	`false`
是否在按下 ESC 鍵時，關閉 prompt
`closeOnOverlayClick`	`boolean`	`false`
是否在點擊遮罩層時，關閉 prompt
`confirmText`	`string`	`OK`
確認按鈕的文字
`cancelText`	`string`	`Cancel`
取消按鈕的文字
`stackedActions`	`boolean`	`false`
是否垂直排列底部操作按鈕
`queue`	`string`	-
佇列名稱。預設不啟用佇列，在多次呼叫該函式時，將同時顯示多個 prompt。可在該參數中傳入一個佇列名稱，具有相同佇列名稱的 prompt 函式，將在上一個 prompt 關閉後才開啟下一個 prompt。 `dialog()`、`alert()`、`confirm()`、`prompt()` 這四個函式的佇列名稱若相同，則也將互相共用同一個佇列。
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
點擊確認按鈕時的回呼函式。函式參數為輸入框的值和 dialog 實例，`this` 指向 dialog 實例。預設點擊確認按鈕後會關閉 prompt；若回傳值為 `false`，則不關閉 prompt；若回傳值為 promise，則將在 promise 被 resolve 後，關閉 prompt。
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
點擊取消按鈕時的回呼函式。函式參數為輸入框的值和 dialog 實例，`this` 指向 dialog 實例。預設點擊取消按鈕後會關閉 prompt；若回傳值為 `false`，則不關閉 prompt；若回傳值為 promise，則將在 promise 被 resolve 後，關閉 prompt。
`onOpen`	`(dialog: Dialog) => void`	-
prompt 開始開啟時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onOpened`	`(dialog: Dialog) => void`	-
prompt 開啟動畫完成時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onClose`	`(dialog: Dialog) => void`	-
prompt 開始關閉時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onClosed`	`(dialog: Dialog) => void`	-
prompt 關閉動畫完成時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onOverlayClick`	`(dialog: Dialog) => void`	-
點擊遮罩層時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
輸入框的驗證函式，參數為輸入框的值。`this` 指向 TextField 實例。將在瀏覽器原生驗證 API 驗證通過後，再使用該函式進行驗證。可以回傳 `boolean` 值，為 `false` 時表示驗證未通過，為 `true` 時表示驗證通過。也可以回傳字串，字串不為空時表示驗證未通過，同時回傳的字串將用作錯誤提示。也可以回傳 Promise，被 resolve 表示驗證通過，被 reject 表示驗證未通過，同時拒絕原因將用作錯誤提示。
`textFieldOptions`	`Partial<TextField>`	-
prompt 內部的輸入框為 `<mdui-text-field>` 元件。可在該參數中設定 `<mdui-text-field>` 元件的參數。

confirm

snackbar