كيفية إنشاء: Snackbar / Toast

تعلم كيفية إنشاء Snackbar/Toast باستخدام CSS وJavaScript.

إنشاء Snackbar

الخطوة الأولى - إضافة HTML:

<!-- استخدم الزر لفتح snackbar -->
<button onclick="myFunction()">Show Snackbar</button>
<!-- snackbar الفعلي -->
<div id="snackbar">Some text some message..</div>

الخطوة الثانية - إضافة CSS:

تحديد أسلوب snackbar وإضافة حركة:

/* snackbar - تحديد موقعه في أسفل الشاشة وسطه */
#snackbar {
  visibility: hidden; /* غير مرئي بشكل افتراضي، يصبح مرئيًا عند النقر */
  min-width: 250px; /* تحديد الأنسب لعرض الأقل */
  margin-left: -125px; /* قسّم قيمة min-width إلى نصفها */
  background-color: #333; /* لون الخلفية الأسود */
  color: #fff; /* لون النص الأبيض */
  text-align: center; /* تنظيم النص في منتصف الصف */
  border-radius: 2px; /* ركن دائري للجوانب */
  padding: 16px; /* مساحة داخليه */
  position: fixed; /* ثابت في أعلى الشاشة */
  z-index: 1; /* إذا لزم الأمر، أضف z-index */
  left: 50%; /* تركز الصندوق الإشعاري */
  bottom: 30px; /* المسافة إلى الأسفل 30px */
}
/* اعرض الصندوق الإشعاري عند النقر على الزر (استخدم الفئة المضافة باستخدام JavaScript) */
#snackbar.show {
  visibility: visible; /* اعرض الصندوق الإشعاري */
  /* أضف تأثيرات التدرج: استخدم 0.5 ثانية للتدرج في الدخول والخروج. ولكن تأخير عملية الخروج لمدة 2.5 ثانية. */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* تأثيرات التدرج في الدخول والخروج للصندوق الإشعاري */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

الخطوة الثالثة - أضف JavaScript:

استخدام JavaScript عن طريق النقر على الزر لتحديد "show" الفئة إلى صندوق الإشعارات:

function myFunction() {
  // الحصول على DIV snackbar
  var x = document.getElementById("snackbar");
  // أضف "show" الفئة إلى DIV
  x.className = "show";
  // 3 ثانية ل�除 "show" الفئة من DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

جرب بنفسك