confirm

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

使用方法

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

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

使用例：

開く

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "確認タイトル",
      description: "確認の説明文",
      confirmText: "OK",
      cancelText: "キャンセル",
      onConfirm: () => console.log("確認されました"),
      onCancel: () => console.log("キャンセルされました"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

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

Options

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

前の章

alert

次の章

prompt