Toast - Materialize 中文

Materialize 为您提供了一种简单的方法，通过 Toast 向您的用户发送不显眼的警报。这些 Toast 还会根据响应式大小进行放置和调整，通过在不同设备大小上单击下面的按钮来试用一下。

Toast！

要执行此操作，请在 JavaScript 中以编程方式调用 M.toast() 函数。


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

将此添加到应用程序中的一种方法是将其作为 onclick 事件添加到按钮。


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

您可以使用这些选项自定义每个 Toast 的行为。

名称	类型	默认值	描述
html	字符串	''	Toast 的 HTML 内容。
displayLength	数字	4000	Toast 在消失前的停留时间（以毫秒为单位）。
inDuration	数字	300	进入持续时间（以毫秒为单位）。
outDuration	数字	375	退出持续时间（以毫秒为单位）。
classes	字符串	''	要添加到 Toast 元素的类。
completeCallback	函数	null	Toast 消失时调用的回调函数。
activationPercent	数字	0.8	Toast 的宽度百分比，用于拖动以关闭 Toast。

名称	类型	描述
el	元素	Toast 元素。
options	对象	实例初始化时使用的选项。
panning	布尔值	描述 Toast 当前的平移状态。
timeRemaining	数字	Toast 在消失前剩余的时间（以毫秒为单位）。

您还可以将 HTML 字符串作为第一个参数传递。请看下面的示例，我们在其中传递了文本以及一个扁平按钮。如果您调用外部函数而不是内联 JavaScript，则无需转义引号。

带有操作的 Toast


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

Toast 回调可以在关闭后成为一个函数。

Toast！


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

我们增加了轻松自定义 Toast 的功能。您可以将类作为可选参数传递到 Toast 函数中。我们为您添加了一个圆角类，但您可以创建自己的 CSS 类并将其应用于 Toast。请查看我们下面的完整示例。

圆形 Toast！


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

要使用 JavaScript 删除特定 Toast，请访问 M_Toast 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();