Snackbarスナックバー

スナックバーコンポーネントは、ページ上で簡潔なアプリケーションプロセスの情報を表示するために使用します。

このコンポーネントを直接使用する以外に、mdui は mdui.snackbar 関数も提供しており、Snackbar コンポーネントの使用を簡単にできます。

使用方法

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

import 'mdui/components/snackbar.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Snackbar } from 'mdui/components/snackbar.js';

使用例：

Photo archived

Snackbar を開く

<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

例

位置

placement 属性を使用して、Snackbar の表示位置を設定できます。

Photo archived

top-start

Photo archived

top

Photo archived

top-end

Photo archived

bottom-start

Photo archived

bottom

Photo archived

bottom-end

<div class="example-placement">
  <div class="row">
    <mdui-snackbar placement="top-start">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">top-start</mdui-button>

    <mdui-snackbar placement="top">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">top</mdui-button>

    <mdui-snackbar placement="top-end">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">top-end</mdui-button>
  </div>
  <div class="row">
    <mdui-snackbar placement="bottom-start">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">bottom-start</mdui-button>

    <mdui-snackbar placement="bottom">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">bottom</mdui-button>

    <mdui-snackbar placement="bottom-end">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">bottom-end</mdui-button>
  </div>
</div>

<script>
  const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");

  snackbars.forEach((snackbar) => {
    const button = snackbar.nextElementSibling;
    button.addEventListener("click", () => snackbar.open = true);
  });
</script>

<style>
.example-placement mdui-button {
  margin: 0.25rem;
  width: 7.5rem;
}
</style>

ソース

アクションボタン

action 属性を使用すると、Snackbar の右側にアクションボタンを追加できます。この属性でボタンのテキストを指定します。アクションボタンをクリックすると action-click イベントが発生します。アクションボタンをローディング状態で表示したい場合は、action-loading 属性を追加します。

Photo archived

Snackbar を開く

<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action");
  const openButton = snackbar.nextElementSibling;

  snackbar.addEventListener("action-click", () => {
    snackbar.actionLoading = true;
    setTimeout(() => snackbar.actionLoading = false, 2000);
  });

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

action スロットを使用して、Snackbar の右側にカスタム要素を追加することもできます。

Photo archived Undo

Snackbar を開く

<mdui-snackbar class="example-action-slot">
  Photo archived
  <mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

クローズ可能

closeable 属性を追加すると、Snackbar の右側に閉じるボタンが表示されます。このボタンをクリックすると Snackbar が閉じ、close イベントが発生します。

Photo archived

Snackbar を開く

<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-closeable");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

close-button スロットを使用して、閉じるボタンの要素をカスタマイズできます。

Photo archived

Snackbar を開く

<mdui-snackbar closeable class="example-close-button-slot">
  Photo archived
  <mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-button-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

close-icon 属性を設定することで、デフォルトの閉じるボタン内の Material Icons アイコンを変更できます。close-icon スロットを使用して閉じるボタン内のアイコン要素をカスタマイズすることもできます。

Photo archived

Snackbar を開く

<mdui-snackbar
  closeable
  close-icon="delete"
  class="example-close-icon"
>Photo archived</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-icon");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

テキスト行数

デフォルトでは、メッセージテキストに行数制限はありません。message-line 属性を使用してテキスト行数を制限できます。最大 2 行まで設定できます。

The item already has the label "travel". You can add a new label. You can add a new label.

Snackbar を開く

<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-line");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

自動クローズ遅延

auto-close-delay 属性を使用して、自動的に閉じるまでの遅延時間をミリ秒単位で設定できます。デフォルト値は 5000 ミリ秒です。

Photo archived

Snackbar を開く

<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-delay");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

外部領域クリックで閉じる

close-on-outside-click 属性を追加すると、Snackbar の外部領域をクリックした時に Snackbar を閉じるように設定できます。

Photo archived

Snackbar を開く

<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>

<mdui-button>Snackbar を開く</mdui-button>

<script>
  const snackbar = document.querySelector(".example-outside");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`open`	`open`	`boolean`	`false`
スナックバーを表示するかどうかを指定します。
`placement`	`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`'bottom'`
スナックバーの表示位置です。既定値は `bottom` です。次の値を指定します： `top`：上部中央 `top-start`：上部左揃え `top-end`：上部右揃え `bottom`：下部中央 `bottom-start`：下部左揃え `bottom-end`：下部右揃え
`action`	`action`	`string`	-
操作ボタンのテキストです。`slot="action"` で操作ボタンを設定することもできます。
`action-loading`	`actionLoading`	`boolean`	`false`
操作ボタンを読み込み中状態にするかどうかを指定します。
`closeable`	`closeable`	`boolean`	`false`
右側に閉じるボタンを表示するかどうかを指定します。
`close-icon`	`closeIcon`	`string`	-
閉じるボタンのMaterial Iconsアイコン名です。`slot="close-icon"` で設定することもできます。
`message-line`	`messageLine`	`1 \| 2`	-
メッセージテキストの最大表示行数です。既定値は制限なしです。次の値を指定します： `1`：最大1行表示 `2`：最大2行表示
`auto-close-delay`	`autoCloseDelay`	`number`	`5000`
自動で閉じるまでの遅延時間（ミリ秒単位）です。`0` に設定すると自動では閉じません。既定値は5000ミリ秒です。
`close-on-outside-click`	`closeOnOutsideClick`	`boolean`	`false`
スナックバー以外の領域をクリックまたはタッチしたときに、スナックバーを閉じるかどうかを指定します。

イベント

名前
`open`
スナックバーが表示を開始したときに発生するイベントです。`event.preventDefault()` を呼び出すことで、スナックバーの表示を防ぐことができます。
`opened`
スナックバーの表示アニメーションが完了したときに発生するイベントです。
`close`
スナックバーが非表示を開始したときに発生するイベントです。`event.preventDefault()` を呼び出すことで、スナックバーが閉じるのを防ぐことができます。
`closed`
スナックバーの非表示アニメーションが完了したときに発生するイベントです。
`action-click`
操作ボタンがクリックされたときに発生します。

Slots

名前
デフォルト
スナックバーのメッセージテキストコンテンツ
`action`
右側の操作ボタン
`close-button`
右側の閉じるボタン。`closeable` 属性が `true` の場合にのみ表示されます。
`close-icon`
閉じるボタン内のアイコン

CSS Parts

名前
`message`
メッセージテキスト
`action`
操作ボタン
`close-button`
閉じるボタン
`close-icon`
閉じるボタン内のアイコン

CSS カスタムプロパティ

名前
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--z-index`
コンポーネントのCSS `z-index` 値

前の章

Slider スライダー

次の章

Switch スイッチ