Toastify JS - 提醒组件的JavaScript库

Toastify JS是一个轻量级JavaScript库，用于在网页上添加高度可定制的提醒组件。这个库提供了一组易于使用的API，可用于快速启用任何类型的提醒，包括成功，警告，错误等。通过Toastify JS，您可以为网站访问者提供非常直观的反馈，从而增强他们的用户体验。

特点

Toastify JS是一个功能齐全的库，具有以下特点：

• 高度可定制：您可以自定义提醒组件的每一个方面，包括背景颜色，图标，文本等。
• 可操作性强：提醒组件提供了一组可操作的按钮，可以在用户与其进行交互时执行某些操作，如关闭，复制到剪贴板等。
• 轻量级：即使在带宽有限的环境下，Toastify JS也能快速加载，并且使用非常高效。它不会拖慢您的网页。

安装

您可以使用以下命令使用npm安装Toastify JS：

npm install toastify-js --save

或者，您可以直接从GitHub仓库获取最新的代码：

git clone https://github.com/apvarun/toastify-js.git

使用

Toastify JS的使用非常简单。您只需要在HTML文档中添加必要的元素和CSS样式，就可以立即使用它。以下是一个基本示例：

首先，在您的HTML文档中添加以下代码片段：

<link rel="stylesheet" href="toastify.min.css">
<script src="toastify.min.js"></script>

<button onclick="Toastify({text: 'Hello World!'}).showToast()">显示提醒</button>

接下来，您需要添加一些CSS样式，以保证提醒组件正常工作：

.toastify{
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
}

.toastify > .toastify-content{
    padding: 16px;
    background-color: #333;
    color: #fff;
}

最后，您需要初始化Toastify JS，并启用它：

Toastify({
  text: "Hello World!",
  duration: 3000,
}).showToast();

这将在用户单击“显示提醒”按钮时显示一个简单的文本提醒，持续3秒钟。

API文档

以下是Toastify JS支持的API列表：

Toastify(options)

创建一个新的提醒组件。

参数：

• options：一个JavaScript对象，其中包含可定制的选项列表。以下是可用的选项：
  • text：要在提醒中显示的文本内容。
  • duration：提醒的持续时间（以毫秒为单位）。默认值为3000毫秒。
  • destination：提醒内的按钮指向的网址。
  • newWindow：如果为true，则在新窗口中打开按钮网址。
  • close：如果为true，则在提醒组件关闭时执行回调。
  • gravity：指定提醒的位置。该值可以是“top”，“bottom”，“left”或“right”。
  • position：指定提醒的位置。该值可以是CSS字符串，如“top: 32px; right: 16px;”。
  • backgroundColor：指定提醒的背景颜色。
  • stopOnFocus：如果为true，则在用户在网页上点击时停止提醒组件。
  • style：提醒组件的CSS类。
  • offset：提醒组件与其容器的距离，指定为CSS字符串，如“margin-top: 16px;”。
  • icon：提醒组件中要显示的图标。
  • className：提醒组件的CSS类名称。

返回值：一个Toastify实例

showToast()

显示当前的Toastify实例。

hideToast()

隐藏当前的Toastify实例。

示例

以下是一些使用Toastify JS的完整示例：

• Hello World示例：

Toastify({
  text: "Hello World!",
  duration: 3000,
}).showToast();

• 自定义颜色和样式的示例：

Toastify({
  text: "Hello World!",
  duration: 3000,
  backgroundColor: "linear-gradient(to right, #00b4db, #0083b0)",
  className: "custom-toast",
  offset: {
      y: 50
  }
}).showToast();

• 添加操作按钮的示例：

Toastify({
  text: "Data copied to clipboard.",
  duration: 3000,
  destination: "#",
  newWindow: false,
  close: true,
  gravity: "bottom",
  position: "right",
  backgroundColor: "#009900",
  stopOnFocus: true,
  icon: "fas fa-check",
  className: "custom-toast",
  offset: {
      y: 50
  }
}).showToast();

结论

如果您想要为您的网站添加高度可定制的提醒组件，那么Toastify JS是一个很好的选择。它是一个轻量级的JavaScript库，易于使用，并具有灵活的API，适用于任何类型的提醒。无论您是一个新手还是一个有经验的Web开发人员，Toastify JS都将成为您构建可用性更高的网站的有用工具。