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

轻量级通知弹出 JavaScript 库 - X-Notify
栏目分类:通知 / 提示   发布日期:2021-09-15   浏览次数:

X-Notify 是一个轻量级的 JavaScript 库,用于帮助开发人员创建类似于Apple 的 Growl和Android 的 Toasts 的通知弹出窗口。

如何使用它:

1. 加载 X-Notify 库的缩小版本,我们就可以开始了。

<script src="x-notify.min.js"></script>

2. 初始化 X-Notify 库。

const Notify = new XNotify();

2. 使用以下方法创建不同类型的通知弹出窗口:

Notify.success({ 
  title: "Success Title", 
  description: "Success Message"
});
Notify.error({ 
  title: "Error Title", 
  description: "Error Message"
});
Notify.alert({ 
  title: "Alert Title", 
  description: "Alert Message"
});
Notify.info({ 
  title: "Info Title", 
  description: "Info Message"
});

3. 或者使用以下选项创建自定义通知弹出窗口:

Notify.info({ 
  title: "Custom Title", 
  description: "Custom Message",
  width: "250px",
  borderRadius: "10px",
  color: "rgb(255,255,255)",
  background: "rgb(0,0,0)"
});

4. 确定通知弹出的持续时间。在此示例中,通知弹出窗口将在 3 秒后自动关闭。

Notify.error({ 
  title: "Error Title", 
  description: "Error Message",
  duration: 3000 // default: 5000
});


5. 确定通知弹出的位置。

    • BottomRight

    • BottomLeft

    • TopLeft

    • TopRight (默认)

    Notify.error({ 
      title: "Error Title", 
      description: "Error Message",
      position: "BottomRight"
    });

官方网站:https://github.com/Xtrendence/X-Notify

相关热词: X-Notify通知toast

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