スナックバー

スナックバーは、画面下部に小さなポップアップを表示します。タイムアウト後、またはユーザーが画面の他の場所をクリックまたはタッチした後に自動的に消えます。

画面には一度に1つのスナックバーしか表示できません。スナックバーがまだ閉じられていないときに次のスナックバーを開くと、次のスナックバーはキューに追加され、現在のスナックバーが閉じられた後に開かれます。

使用方法

mdui.snackbar(params) メソッドを呼び出すだけです。

使い方

スナックバーは JavaScript から直接呼び出すため、HTML レイアウトを記述する必要はありません。

スナックバーを呼び出すには2つの方法があります：

mdui.snackbar(message, params)
mdui.snackbar(params)

どちらの方法もスナックバーのインスタンスを返します。

スナックバーがサポートするパラメーター：

パラメータ名	タイプ	デフォルト値	説明
`message`	`string`		スナックバーのテキスト。`mdui.snackbar(params)` で呼び出す場合、このパラメーターは空にできません。
`timeout`	`int`	`4000`	スナックバーが自動的に隠れるまでの遅延時間（ミリ秒単位）。0 に設定すると自動的に閉じません。
`position`	`string`	`bottom`	スナックバーの位置。 `bottom`：下 `top`：上 `left-top`：左上 `left-bottom`：左下 `right-top`：右上 `right-bottom`：右下
`buttonText`	`string`		ボタンのテキスト。
`buttonColor`	`string`	`#90CAF9`	ボタンのテキストの色。`red`、`#ffffff`、`rgba(255, 255, 255, 0.3)` などの色名または色値を指定できます。
`closeOnButtonClick`	`boolean`	`true`	ボタンをクリックしたときにスナックバーを閉じるかどうか。
`closeOnOutsideClick`	`boolean`	`true`	スナックバー以外の領域をクリックまたはタッチしたときにスナックバーを閉じるかどうか。
`onClick`	`function`		スナックバーがクリックされたときのコールバック関数。
`onButtonClick`	`function`		スナックバーのボタンがクリックされたときのコールバック関数。
`onOpen`	`function`		スナックバーが開き始めたときのコールバック関数。
`onOpened`	`function`		スナックバーが開いた後のコールバック関数。
`onClose`	`function`		スナックバーが閉じ始めたときのコールバック関数。
`onClosed`	`function`		スナックバーが閉じられた後のコールバック関数。

スナックバーのインスタンスが持つメソッド：

メソッド名	説明
`close`	スナックバーを閉じます。閉じられた後、スナックバーは破棄されます。

例

通常のスナックバー

例

mdui.snackbar({
  message: 'Message sent'
});

コールバック付きのスナックバー

例

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('スナックバーをクリックしました');
  },
  onButtonClick: function(){
    mdui.alert('ボタンをクリックしました');
  },
  onClose: function(){
    mdui.alert('閉じました');
  }
});

異なる位置のスナックバー

例

mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});

ツールチップ

テーブル

スナックバー

使用方法

関連情報

使い方

例

通常のスナックバー

コールバック付きのスナックバー

異なる位置のスナックバー