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: "Prompt Title",
      description: "Prompt description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: (value) => console.log("confirmed: " + value),
      onCancel: () => console.log("canceled"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

関数のパラメーターは Options オブジェクトです。戻り値は Promise です。確定ボタンをクリックしてダイアログを閉じた場合は Promise が 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()` の 4 つの関数のキュー名が同じ場合、同じキューを共有します。
`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 されれば検証不通過となります。reject された値はエラーメッセージとして使用されます。
`textFieldOptions`	`Partial<TextField>`	-
prompt 内部の入力フィールドは `<mdui-text-field>` コンポーネントです。このパラメーターで `<mdui-text-field>` コンポーネントのパラメーターを設定できます。

confirm

snackbar