alert

alert 関数は、<mdui-dialog> コンポーネントをラップする関数で、ネイティブの window.alert 関数の代わりに使います。この関数を使えば、コンポーネントの HTML コードを書かずにアラートダイアログを開けます。

使用方法

関数を必要に応じてインポートします：

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

使用例：

開く

<mdui-button class="example-button">開く</mdui-button>

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "アラートタイトル",
      description: "アラートの説明文",
      confirmText: "OK",
      onConfirm: () => console.log("確認されました"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

alert 関数は Options オブジェクトをパラメーターとして受け取ります。戻り値は Promise です。確認ボタンのクリックで閉じられた場合は Promise は resolve され、他の方法で閉じられた場合は reject されます。

Options

プロパティ名	型	デフォルト値
`headline`	`string`	-
アラートのタイトル
`description`	`string`	-
アラートの説明テキスト
`icon`	`string`	-
アラート上部の Material Icons アイコン名
`closeOnEsc`	`boolean`	`false`
ESC キーを押したときにアラートを閉じるかどうか
`closeOnOverlayClick`	`boolean`	`false`
オーバーレイをクリックしたときにアラートを閉じるかどうか
`confirmText`	`string`	`OK`
確認ボタンのテキスト
`queue`	`string`	-
キュー名。デフォルトではキューは無効になっているため、この関数を複数回呼び出すと複数のアラートが同時に表示されます。このパラメーターにキュー名を指定すると、同じキュー名を持つ alert 関数は、前のアラートが閉じられた後に次のアラートを開きます。 `dialog()`、`alert()`、`confirm()`、`prompt()` の4つの関数でキュー名が同じ場合、同じキューを共有します。
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
確認ボタンクリック時のコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。デフォルトでは確認ボタンをクリックするとアラートを閉じます。戻り値が `false` の場合は閉じません。戻り値が promise の場合は、その promise が resolve された後に閉じます。
`onOpen`	`(dialog: Dialog) => void`	-
アラートが開き始めるときのコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。
`onOpened`	`(dialog: Dialog) => void`	-
アラートの開くアニメーション完了時のコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。
`onClose`	`(dialog: Dialog) => void`	-
アラートが閉じ始めるときのコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。
`onClosed`	`(dialog: Dialog) => void`	-
アラートの閉じるアニメーション完了時のコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。
`onOverlayClick`	`(dialog: Dialog) => void`	-
オーバーレイクリック時のコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。

前の章

dialog

次の章

confirm