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

Toast通知库 - Toasting
栏目分类:通知 / 提示   发布日期:2021-08-19   浏览次数:

另一个 toast JavaScript 库,用于在页面上显示带有进度条的 toast 通知。

更多功能:

  • 5种通知类型。

  • 6 种进度条样式。

  • 自动关闭与否。

使用:

1. 将样式表 toasting.css 和 JavaScript toasting.js 导入页面。

<link rel=”stylesheet” href=”dist/css/toasting.css” />
<script src=”dist/js/toasting.js”></script>

2. 在页面上创建一个默认的 toast 通知。

toasting.create({
  "title": "提示标题",
  "text": "这里是提示内容",
});

3. 确定通知类型:

  • default

  • success

  • warning

  • error

  • info

toasting.create({
  "title": "提示标题",
  "text": "这里是提示内容",
  "type": "success",
});

4.确定进度条样式

  • default

  • success

  • warning

  • error

  • info

  • rainbow

toasting.create({
  "title": "提示标题",
  "text": "这里是提示内容",
  "progressBarType": "rainbow",
});

5. 确定 toast 通知应该持续多长时间。默认值:4000 毫秒。

toasting.create({
  "title": "提示标题",
  "text": "这里是提示内容",
  "timeout": 5000,
});

6. 确定是否将toast通知设置为Sticky,即toast通知在被点击之前永远不会自动关闭。

toasting.create({
  "title": "提示标题",
  "text": "这里是提示内容",
  "autoHide": false,
});

7.确定是否隐藏进度条。默认值:false。

toasting.create({
  "title": "提示标题",
  "text": "这里是提示内容",
  "hideProgressBar": true,
});


官方网站:https://github.com/tharith-p/toasting

相关热词: Toasting通知警告提示

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