トースト - Materialize

Materializeは、トーストを通じてユーザーに控えめなアラートを送信する簡単な方法を提供します。これらのトーストは、レスポンシブに配置およびサイズ調整もされます。さまざまなデバイスサイズで下のボタンをクリックして試してみてください。

これを行うには、JavaScriptでM.toast()関数をプログラムで呼び出します。


  M.toast({html: 'I am a toast!'})

アプリケーションにこれを追加する1つの方法は、ボタンにonclickイベントとして追加することです。


  <a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>

これらのオプションを使用して、各トーストの動作をカスタマイズできます。

名前	タイプ	デフォルト	説明
html	文字列	''	トーストのHTMLコンテンツ。
displayLength	数値	4000	トーストが消えるまでの表示時間（ミリ秒単位）。
inDuration	数値	300	トランジションインのアニメーション時間（ミリ秒単位）。
outDuration	数値	375	トランジションアウトのアニメーション時間（ミリ秒単位）。
classes	文字列	''	トースト要素に追加されるクラス。
completeCallback	関数	null	トーストが消されたときに呼び出されるコールバック関数。
activationPercent	数値	0.8	ドラッグでトーストを消すために必要なトーストの幅の割合。

名前	タイプ	説明
el	要素	トースト要素。
options	オブジェクト	インスタンスが初期化されたオプション。
panning	真偽値	トーストの現在のパン状態を表します。
timeRemaining	数値	トーストが消えるまでの残り時間（ミリ秒単位）。

最初の引数としてHTML文字列を渡すこともできます。テキストとフラットボタンを渡す次の例を見てください。インラインJavaScriptではなく外部関数を呼び出す場合は、引用符をエスケープする必要はありません。

アクション付きトースト


  var toastHTML = '<span>I am toast content</span><button class="btn-flat toast-action">Undo</button>';
  M.toast({html: toastHTML});

トーストが消されたときにコールバック関数を実行できます。

トースト！


  <a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</a>

トーストを簡単にカスタマイズする機能を追加しました。トースト関数にオプションのパラメータとしてクラスを渡すことができます。丸いクラスを追加しましたが、独自のCSSクラスを作成してトーストに適用できます。以下の完全な例をチェックしてください。

丸いトースト！


  // 'rounded' is the class I'm applying to the toast
  M.toast({html: 'I am a toast!', classes: 'rounded'});

JavaScriptを使用して特定のトーストを削除するには、M_ToastトーストのHTML要素にアクセスし、dismiss関数を呼び出します。


  // Get toast DOM Element, get instance, then call dismiss function
  var toastElement = document.querySelector('.toast');
  var toastInstance = M.Toast.getInstance(toastElement);
  toastInstance.dismiss();