当前位置:主页 > JavsScript库 > 通知 / 提示 >

EggyJS Toast弹出提示窗口插件 - EggyJS
栏目分类:通知 / 提示   发布日期:2021-08-17   浏览次数:

一个快速、零依赖的 JavaScript 通知库,用于在 Web 应用程序上显示 Toast 样式的通知弹出窗口。

特征:

  • 4 种通知类型:“success”、“warning”、“info”和“error”。

  • 使用您自己的 CSS 轻松设置样式。

  • 内置进度条指示剩余时间。

  • 当有多个 toast 弹出窗口时自动堆叠。

  • 自定义图标。

EggyJS使用:

1. 安装并导入EggyJS库。

# NPM
$ npm i @s-r0/eggy-js --save
import { Eggy } from '@s-r0/eggy-js';

2. 您可以通过将以下文件插入到您的文档中来手动安装库。

<!-- 核心样式表 -->
<link rel="stylesheet" href="css/eggy.css" />
<!-- 进度条样式 -->
<link rel="stylesheet" href="css/progressbar.css" />
<!-- 主题 -->
<link rel="stylesheet" href="css/theme.css" />
import { Eggy } from './js/eggy.js';

3. 在屏幕上显示一个基本的 toast 弹出窗口。

Eggy({
  title:  'Toast Title',
  message:  'Toast Message',
});
 
// 或异步
await Eggy({
  title: 'Toast Title',
  message: 'Toast Message',
});

4. 设置 toast 弹窗的位置。

  • ‘top-right’ (default)

  • ‘top-left’

  • ‘bottom-right’

  • ‘bottom-left’

await Eggy({
  title: 'Toast 标题',
  message: 'Toast 内容',
  position: 'top-right',
});

5. 设置通知类型

  • ‘success’ (default)

  • ‘warning’

  • ‘info’

  • ‘error’

await Eggy({
  title: 'Toast 标题',
  message: 'Toast 内容',
  type: 'error',
});

6. 确定 toast 弹出窗口应在屏幕上停留多长时间。默认值:5000 毫秒。

await Eggy({
  title: 'Toast 标题',
  message: 'Toast 内容',
  duration: 3000,
});

7. 禁用默认样式,然后您可以创建自己的样式和动画。

await Eggy({
  title: 'Toast 标题',
  message: 'Toast 内容',
  styles: false,
});

8. 确定是否在 toast 弹出窗口中显示进度条。默认值:true。

await Eggy({
  title: 'Toast 标题',
  message: 'Toast 内容',
  progressBar: false,
});

9. 在 toast 弹出窗口初始化后触发一个函数。

Eggy().then((eggytoast) => {
  // 做点什么
});
 
// 或
let eggytoast = await Eggy();
eggytoast.classList.add('custom-css');


官方网站:https://github.com/S-R0/eggy-js

相关热词: EggyJS提示窗口

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库