使用 Toast 通知角度引导程序 8 - Javascript

在 Web 应用程序中，Toast 通知是一种非常常见的用户界面元素，可以向用户显示经过简短时间渐隐的消息。在这个教程中，我们将介绍如何使用 JavaScript 中的 Toast 通知来向用户显示信息。

准备工作

在开始之前，您需要确保您的 Web 应用程序中引入了一个 Toast 通知插件，我们这里假设您已经引用了一个叫做 toastr 的插件。

显示简单的 Toast 通知

要在 JavaScript 中显示一个简单的 Toast 通知，您需要调用 toastr.info() 函数，并传递一条消息作为参数。下面是一个简单的示例：

toastr.info('Hello, World!');

在这个示例中，我们向用户显示了一条简单的信息 "Hello, World!"。

显示不同类型的 Toast 通知

toastr 插件支持多种不同类型的 Toast 通知，例如 “info”，“success”，“warning” 和 “error”。您可以使用不同的函数调用来显示不同类型的消息。例如，要显示成功消息，您可以使用如下代码：

toastr.success('Your operation was successful!');

显示自定义 Toast 通知样式

toastr 插件提供了一系列的选项，让您可以自定义 Toast 通知样式，例如颜色，位置，关闭按钮等。您可以通过传递一个选项对象作为第二个参数来修改 Toast 通知样式。下面是一个自定义样式的示例：

toastr.options = {
  'closeButton': true,
  'positionClass': 'toast-top-right',
  'progressBar': true,
  'showDuration': '300',
  'hideDuration': '1000',
  'timeOut': '5000',
  'extendedTimeOut': '1000',
  'showEasing': 'swing',
  'hideEasing': 'linear',
  'showMethod': 'fadeIn',
  'hideMethod': 'fadeOut'
};

toastr.info('You can customize the appearance of Toast notifications!');

在这个示例中，我们定制了 Toast 通知的位置，时长，动画效果等选项。

结论

Toast 通知是一种非常简单且实用的用户界面元素，可以向用户快速展示一系列的信息。使用 toastr 插件，您可以轻松地在 JavaScript 中显示 Toast 通知，并且可以自定义 Toast 通知的样式，以适应您的应用程序。