Cómo crear: Snackbar / Toast
- Página anterior Flotabilidad responsiva
- Página siguiente Ventana de pantalla completa
Aprende a usar CSS y JavaScript para crear Snackbar/Toast.
Snackbar / Toast
Snackbar se utiliza generalmente como herramienta de tooltip/pop-up para mostrar mensajes en la parte inferior de la pantalla.
Hacer clic en el botón para mostrar Snackbar. Se desaparecerá después de 3 segundos.
Some text some message..
Crear Snackbar
Primer paso - Añadir HTML:
<!-- Usar botón para abrir snackbar --> <button onclick="myFunction()">Mostrar Snackbar</button> <!-- snackbar real --> <div id="snackbar">Some text some message..</div>
Segundo paso - Añadir CSS:
Establecer el estilo del snackbar y agregar animación:
/* snackbar - colocarlo en la mitad inferior de la pantalla */ #snackbar { visibility: hidden; /* oculto por defecto, visible al hacer clic */ min-width: 250px; /* establece el ancho mínimo por defecto */ margin-left: -125px; /* divide el valor de min-width por 2 */ background-color: #333; /* color de fondo en negro */ color: #fff; /* color de texto en blanco */ text-align: center; /* alineación de texto al centro */ border-radius: 2px; /* borde redondeado */ 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); }
- Página anterior Flotabilidad responsiva
- Página siguiente Ventana de pantalla completa