Toast.js - CSS

Toast.js - CSS 是一个能够样式化网页中的信息提示框的开源库。它拥有美观简洁的设计，易于使用和定制。

特性

• 响应式设计
• 支持多种动画效果
• 多种主题
• 可自定义样式
• 支持 HTML 内容

安装

通过 npm 安装：

npm install toast-js-css

或者通过 CDN 使用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toast-js-css/dist/toast.min.css">
<script src="https://cdn.jsdelivr.net/npm/toast-js-css/dist/toast.min.js"></script>

使用

调用 toast() 函数即可创建一个提示框。

toast('Hello World!')

Toast.js - CSS 还支持多种选项，例如指定持续时间、选择动画效果等等。

toast({
  content: 'Hello World!',
  duration: 3000,
  animation: 'slide',
  theme: 'dark'
})

自定义样式

Toast.js - CSS 允许用户自定义样式。可以通过覆盖默认样式来实现自定义，也可以使用 SASS 变量来修改主题颜色。

// SASS 变量
$toast-bg: #333;
$toast-color: #fff;
$toast-border: 1px solid $toast-color;

// 修改样式
.toast {
  background-color: $toast-bg;
  color: $toast-color;
  border: $toast-border;
}

支持的主题

Toast.js - CSS 内置了多种主题，包括 light、dark、success、warning、error 等等。

指定主题的方式为：

toast({
  content: 'Hello World!',
  theme: 'success'
})

更多主题请查看文档。

示例

以下是一个运用 Toast.js - CSS 制作的例子，它可以实现点击按钮进行提交数据的功能，并使用 Toast.js - CSS 来提示用户提交成功或失败的信息。

<form>
  <input type="text" name="email" placeholder="输入您的邮箱">
  <button id="submit-btn">提交</button>
</form>

<script>
  const form = document.querySelector('form')
  const submitBtn = document.querySelector('#submit-btn')

  form.addEventListener('submit', async (e) => {
    e.preventDefault()

    submitBtn.disabled = true

    try {
      // 发送请求
      const res = await fetch('/submit', {
        method: 'POST',
        body: new FormData(form)
      })

      const data = await res.json()

      if (data.success) {
        toast({
          content: '提交成功！',
          theme: 'success'
        })
      } else {
        throw new Error('提交失败')
      }
    } catch (err) {
      toast({
        content: err.message,
        theme: 'error'
      })
    } finally {
      submitBtn.disabled = false
    }
  })
</script>

结尾

Toast.js - CSS 是一个简单易用的信息提示框库，它提供了多种主题和可自定义的样式，可以满足各种网站的需求。在使用 Toast.js - CSS 的过程中，如果您有任何问题或建议，请随时联系我们。