Πώς να δημιουργήσετε: Snackbar / Toast

Μάθετε πώς να δημιουργήσετε Snackbar/Toast χρησιμοποιώντας CSS και JavaScript.

Snackbar / Toast

Το Snackbar χρησιμοποιείται συχνά ως εργαλείο σήματος/φλύτρες για την εμφάνιση μηνυμάτων στο κάτω μέρος της οθόνης.

Κάντε κλικ στο κουμπί για να εμφανίσετε το Snackbar. Θα εξαφανιστεί μετά από 3 δευτερόλεπτα.

Μερικό κείμενο με μήνυμα..

Δημιουργία Snackbar

Πρώτο βήμα - Προσθήκη HTML:

<!-- Χρήση κουμπιού για να ανοίξει το snackbar -->
<button onclick="myFunction()">Εμφάνιση Snackbar</button>
<!-- Το πραγματικό snackbar -->
<div id="snackbar">Μερικό κείμενο με μήνυμα..</div>

Δεύτερο βήμα - Προσθήκη CSS:

Ρύθμιση του στυλ του snackbar και προσθήκη αニματιώσεων:

/* snackbar - τοποθετήστε το στη μέση του κατώτερου μέρους της οθόνης */
#snackbar {
  visibility: hidden; /* κρυφή ως προεπιλογή, ορατή όταν πατηθεί */
  min-width: 250px; /* ρύθμιση προεπιλεγμένης ελάχιστης πλάθους */
  margin-left: -125px; /* διαιρέστε την τιμή min-width με 2 */
  background-color: #333; /* μαύρο χρώμα υποβάθρου */
  color: #fff; /* λευκό χρώμα κειμένου */
  text-align: center; /* κεντρική σειρά κειμένου */
  border-radius: 2px; /* κυριαρχία γωνίας */
  padding: 16px; /* 内边距 */
  position: fixed; /* 固定在屏幕顶部 */
  z-index: 1; /* 如果需要，添加z-index */
  left: 50%; /* 将snackbar居中 */
  bottom: 30px; /* 距离底部 30px */
}
/* 单击按钮时显示 snackbar（使用 JavaScript 添加的类） */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* 添加动画：用0.5秒淡入和淡出 snackbar。但是，将淡出过程延迟 2.5 秒。 */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* 淡入和淡出 snackbar 的动画 */
@-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 通过点击按钮向 snackbar 容器添加 "show" 类：

function myFunction() {
  // 获取 snackbar DIV
  var x = document.getElementById("snackbar");
  // 向 DIV 添加 "show" 类
  x.className = "show";
  // 3秒后，从 DIV 中删除 "show" 类
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

Δοκιμάστε το προσωπικά