snackbar

snackbar 関数は <mdui-snackbar> コンポーネントをラップしたものです。この関数を使用すると、コンポーネントの HTML コードを記述せずにスナックバーを開くことができます。

使用方法

関数をインポートするには、次のようにします：

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

使用例：

open

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

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Photo archived",
      action: "Undo",
      onActionClick: () => console.log("click action button")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

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

Options

プロパティ名	型	デフォルト値
`message`	`string`	-
スナックバー内に表示するメッセージテキスト
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
スナックバーの表示位置。デフォルトは `bottom`。指定可能な値： `top`：上部、中央揃え `top-start`：上部、左揃え `top-end`：上部、右揃え `bottom`：下部、中央揃え `bottom-start`：下部、左揃え `bottom-end`：下部、右揃え
`action`	`string`	-
アクションボタンのテキスト
`closeable`	`boolean`	`false`
右側に閉じるボタンを表示するかどうか
`messageLine`	`1 \| 2`	-
メッセージテキストの最大表示行数。デフォルトでは行数制限なし。指定可能な値： `1`：メッセージテキストは最大1行まで表示 `2`：メッセージテキストは最大2行まで表示
`autoCloseDelay`	`number`	`5000`
自動的に閉じるまでの時間（ミリ秒単位）。0 に設定すると自動的に閉じません。デフォルトでは5秒後に自動的に閉じます。
`closeOnOutsideClick`	`boolean`	`false`
スナックバー以外の領域をクリックまたはタップしたときにスナックバーを閉じるかどうか
`queue`	`string`	-
キュー名。デフォルトではキューは無効です。この関数を複数回呼び出すと、複数のスナックバーが同時に表示されます。このパラメーターにキュー名を指定すると、同じキュー名を持つスナックバー関数は、前のスナックバーが閉じた後に次のスナックバーを開きます。
`onClick`	`(snackbar: Snackbar) => void`	-
スナックバークリック時のコールバック関数。関数のパラメーターはスナックバーインスタンスで、`this` もスナックバーインスタンスを指します。
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
アクションボタンクリック時のコールバック関数。関数のパラメーターはスナックバーインスタンスで、`this` もスナックバーインスタンスを指します。デフォルトではクリック後にスナックバーを閉じます。戻り値が `false` の場合はスナックバーを閉じません。戻り値が promise の場合は、promise が resolve された後にスナックバーを閉じます。
`onOpen`	`(snackbar: Snackbar) => void`	-
スナックバーが表示され始めるときのコールバック関数。関数のパラメーターはスナックバーインスタンスで、`this` もスナックバーインスタンスを指します。
`onOpened`	`(snackbar: Snackbar) => void`	-
スナックバーの表示アニメーションが完了したときのコールバック関数。関数のパラメーターはスナックバーインスタンスで、`this` もスナックバーインスタンスを指します。
`onClose`	`(snackbar: Snackbar) => void`	-
スナックバーが非表示になり始めるときのコールバック関数。関数のパラメーターはスナックバーインスタンスで、`this` もスナックバーインスタンスを指します。
`onClosed`	`(snackbar: Snackbar) => void`	-
スナックバーの非表示アニメーションが完了したときのコールバック関数。関数のパラメーターはスナックバーインスタンスで、`this` もスナックバーインスタンスを指します。

Capítulo anterior

prompt

Próximo capítulo

getTheme