Primer CSS Toasts

Primer CSS Toasts 是一个基于 CSS 的开源库，用于在网页上创建漂亮的 Toasts（通知小窗口）。它内置了一些默认样式和选项，使开发者能够轻松地创建和自定义 Toasts。

特点

• 简单易用：只需几行代码即可创建一个 Toast。
• 自定义选项：可以根据需求调整 Toast 的样式、位置、显示时间等选项。
• 响应式设计：Toasts 可以根据屏幕大小和设备自动适应。
• 内置图标：支持使用内置的图标来增强用户通知。
• 轻量级：体积小，加载速度快。

如何使用

首先，你需要在你的 HTML 文件中引入 Primer CSS：

<link rel="stylesheet" href="https://unpkg.com/primer-css@v16.0.3/build/build.css">

然后，你可以使用以下代码创建一个 Toast：

<div class="toasts">
  <div class="toast toast-success" role="alert">
    <div class="toast-icon"></div>
    <div class="toast-message">
      This is a success message!
    </div>
  </div>
</div>

可以通过修改 toast-success 类来改变 Toast 的样式。你还可以使用其他内置的样式类，如 toast-danger、toast-warning、toast-info 等。

自定义选项

Primer CSS Toasts 提供了一些自定义选项，你可以在创建 Toast 时使用 data-* 属性来调整它们。下面是一些常用的选项：

• data-toast-position：指定 Toast 的位置。可以是 top-left、top-right、bottom-left 或 bottom-right。
• data-toast-duration：指定 Toast 的显示时间（毫秒）。默认是 5000。
• data-toast-autohide：指定是否自动隐藏 Toast。可以是 true 或 false。
• data-toast-container：指定 Toast 的容器选择器。默认是 .toasts。

以下是一个使用自定义选项的例子：

<div class="toasts">
  <div class="toast toast-info" role="alert" data-toast-position="top-right" data-toast-duration="3000">
    <div class="toast-icon"></div>
    <div class="toast-message">
      This is an info message!
    </div>
  </div>
</div>

更多资源

• Primer CSS 官方网站
• Primer CSS Toasts 文档
• GitHub 仓库

Enjoy using Primer CSS Toasts to create beautiful and functional Toasts for your web applications!