dialog

dialog 関数は <mdui-dialog> コンポーネントをラップするもので、この関数を使えば、コンポーネントの HTML コードを書かずにダイアログを開けます。

使用方法

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

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

使用例：

開く

<mdui-button class="example-button">開く</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: "OK",
          onClick: () => {
            console.log("確認されました");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

関数は Options オブジェクトをパラメーターとして受け取ります。戻り値は <mdui-dialog> コンポーネントのインスタンスです。

Options

プロパティ名	型	デフォルト値
`headline`	`string`	-
ダイアログのタイトル
`description`	`string`	-
ダイアログの説明テキスト
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
ダイアログ内の body コンテンツ。HTML 文字列、DOM 要素、または JQ オブジェクトを指定できます。
`icon`	`string`	-
ダイアログ上部の Material Icons アイコン名
`closeOnEsc`	`boolean`	`false`
ESC キーを押したときにダイアログを閉じるかどうか
`closeOnOverlayClick`	`boolean`	`false`
オーバーレイをクリックしたときにダイアログを閉じるかどうか
`actions`	`Action[]`	-
下部の操作ボタンの配列
`stackedActions`	`boolean`	`false`
下部の操作ボタンを垂直に配置するかどうか
`queue`	`string`	-
キュー名。デフォルトではキューは無効になっているため、この関数を複数回呼び出すと複数のダイアログが同時に表示されます。このパラメーターにキュー名を指定すると、同じキュー名を持つ dialog 関数は、前のダイアログが閉じた後に次のダイアログを開きます。 `dialog()`、`alert()`、`confirm()`、`prompt()` の4つの関数でキュー名が同じ場合、同じキューを共有します。
`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 インスタンスを指します。

Action

プロパティ名	型	デフォルト値
`text`	`string`	-
ボタンのテキスト
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
ボタンクリック時のコールバック関数。関数のパラメーターは dialog インスタンスで、`this` も dialog インスタンスを指します。デフォルトではボタンクリック後にダイアログを閉じます。戻り値が `false` の場合は閉じません。戻り値が promise の場合は、promise が resolve された後に閉じます。

前の章

jq ライブラリ

次の章

alert