Menu

Jak na snackbar/toast v HTML

2. 9. 2018 - Daniel Bulant - Ostatní tutoriály
Jak na snackbar/toast v HTML

Snackbar/toast se často používá jako notifikace v rámci aplikace. Já vám teď ukážu, jak je udělat pomocí HTML, CSS a JS.

Ukázka jak může vypadat snackbar
Takto může vypadat snackbar na webu.

Nejdříve si uděláme HTML:

<!-- Tlačítko na zobrazení snackbaru--><
button onclick="toast()">zobrazit snackbar</button>
<
!-- Snackbar jako takový -->
<div id="snackbar">Toto je snackbar!</div>

To by jsme měli HTML. Teď nastylujeme snackbar přes CSS:

/* Snackbar - zobrazí dole uprostřed */

#snackbar {
  visibility: hidden;
  /* skovaný dokud se nespustí funkce */
  min-width: 250px;
  /* nastaví minimální šířku */
  margin-left: -125px;
  background-color: #333;
  /* Tmavé pozadí */
  color: #fff;
  /* bílá barva textu */
  text-align: center;
  /* vycentrovaný text */
  border-radius: 2px;
  /* zahnuté rohy */
  padding: 16px;
  position: fixed;
  /* zůstane na místě i při scrollování */
  z-index: 1;
  left: 50%;
  /* vycentruje snackbar */
  bottom: 30px;
  /* 30px od spoda */
}


/* zobrazí snackbar při spuštění funkce */

#snackbar.show {
  visibility: visible;
}


/* přidá animaci fadein na 0.5 vteřiny, ale zpozdí fadeout o 2.5 vteřiny*/

-webkit-animation: fadein 0.5s,
fadeout 0.5s 2.5s;
animation: fadein 0.5s,
fadeout 0.5s 2.5s;

}

/* animace pro zobrazení a skrytí snackbaru */
@-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;
  }
}

A teď nám chybí poslední čast: Javascript.

function toast() {
// získá snackbar    
var x = document.getElementById("snackbar");    
// přidá class show    
x.className = "show";    
// po třech vteřinách opět odebere    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);}

To je pro tento tutoriál vše. Co dál? Zkuste si vytvořit PHP skript na odeslání zprávy do discordu. Nebo si můžete přečíst originál v angličtině na w3schools.com

Napsat komentář