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

JavaScript中最小的Snackbar UI组件
栏目分类:通知 / 提示   发布日期:2021-09-08   浏览次数:

与 Javascript Promises 一起使用的最小的现代小吃栏通知弹出窗口。

使用:

1.将您自己的通知消息添加到小吃店。

<div class="snackbar-wrapper">
  <div class="snackbar">
    <img src="notification.svg" alt="notification-icon">
    <p>这是一个 SanckBar 通知!</p>
  </div>
</div>

2. 创建一个按钮来触发零食栏通知。

<button type="button" class="btn">点击显示 Snackbar</button>

3. 启用按钮切换小吃栏通知的主脚本。

"use strict";
var btn = document.querySelector(".btn");
var bar = document.querySelector(".snackbar-wrapper");
btn.addEventListener("click", () => {
    btn.disabled = true;
    showPromise().then(setTimeout(() => {
        hidePromise().then(() => {
            btn.disabled = false;
        });;
    }, 3000));
});
var showPromise = () => {
    return new Promise((resolve, reject) => {
        bar.style.display = "inline-block";
        setTimeout(() => {
            bar.style.opacity = 1;
            bar.style.top = "90vh";
            resolve();
        }, 10);
    });
}
var hidePromise = () => {
    return new Promise((resolve, reject) => {
        bar.style.opacity = 0;
        bar.style.top = "110vh";
        setTimeout(() => {
            bar.style.display = "none";
            resolve();
        }, 500);
    });
}

4. 小吃店的示例 CSS。

.snackbar-wrapper{
  display: none;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 15px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: white;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: fixed;
  top: 110vh; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: top .5s ease-in-out, opacity .7s ease-in-out;
}
.snackbar{
  display: flex;
  justify-content: space-evenly;
}
.snackbar > img{
  width: 20px;
  margin-right: 10px;
}
.snackbar > p{
  padding: 0; margin: 0;
}

官方网站:https://github.com/ArslanAmeer/Ui-Component-SnackBar

相关热词: Snackbar通知

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