¿Cómo crear un Snackbar usando HMTL, CSS y JavaScript?

Los snackbars en el diseño web son notificaciones que se muestran en el sitio web. A veces, los desarrolladores quieren mostrar notificaciones adicionales a los usuarios, haciéndoles saber cierta información que es importante pero que al mismo tiempo no debería afectar la experiencia del usuario. Esta información puede ser sobre algún tipo de evento que ha ocurrido o ocurrirá dentro del sitio web, ya sea que haya tenido éxito o no, o que requiera alguna entrada o intervención rápida del usuario.

Snackbars informa a los usuarios de los procesos que realizará un sitio web o proporciona comentarios sobre los procesos que el sitio web ya ha realizado. Por ejemplo, una llamada API fallida, etc. Por lo general, ocurren en la parte inferior de la pantalla dentro del sitio web y no deberían obstaculizar el flujo actual o la experiencia del usuario. Suelen desaparecer por sí solos a menos que se requiera alguna intervención del usuario. Los Snackbars solo deben mostrarse uno a la vez para evitar obstruir la pantalla. Por lo general, contienen una sola acción, como Descartar/Cancelar/Aceptar , y también se pueden usar como parte del manejo de errores. También pueden activarse mediante acciones personalizadas, como cuando el usuario hace clic en un botón.

Bootstrap y jQuery brindan un amplio soporte para la notificación de snackbar a través de clases y complementos, pero también se pueden diseñar e implementar sin ninguna biblioteca externa simplemente usando HTML , CSS y JavaScript únicamente. También es importante saber que muchos marcos web como Angular 4+, ReactJS, etc. y las aplicaciones de Android también brindan soporte para las notificaciones de Snackbar y se pueden implementar utilizando sus propias clases y métodos. Para una explicación detallada, consulte los artículos:

En este tutorial, implementaremos las notificaciones de Snackbar para un sitio web usando solo HTML, CSS y JavaScript.
Suponemos que está familiarizado con las reglas de HTML y CSS y tiene un conocimiento básico de las animaciones CSS.

Paso 1: Instale Browsersync usando npm . Usaremos Browsersync para iniciar un servidor y proporcionar una URL para ver el sitio web HTML, la animación CSS y cargar los archivos JavaScript respectivos. Instalaremos Browsersync globalmente.
```
npm install -g browser-sync
```

Paso 2: cree un archivo «index.html» , un archivo index.css y un index.js en la carpeta raíz de su proyecto.

index.html: agregue el siguiente fragmento de código en ese archivo.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <!-- Loading External index.css file -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h2>
     GeeksforGeeks - Snackbar using HTML, CSS & JS
    </h2>
  
    <!-- Custom Action to Trigger the Snackbar -->
    <button class="btn btn-lg" 
            onclick="showSnackbar()">
         Show Snackbar
    </button>
    <div id="snackbar">Hello GeeksforGeeks</div>
    <!-- Loading External index.js file -->
    <script src="index.js"></script>
</body>
</html>

index.css: De forma predeterminada, hemos configurado el elemento HTML #snackbar para que se oculte mediante la propiedad de visibilidad de CSS . También hemos definido la posición: fijo; e índice z: 1; Propiedades CSS para la notificación de Snackbar para que cuando se haga visible siempre se muestre arriba de la pantalla para el Usuario. Consulte los comentarios del código para una mejor comprensión. La propiedad !important CSS establece que todas las demás reglas en conflicto en un elemento HTML DOM deben ignorarse, y la regla denotada por !importantse va a aplicar. Esta regla anula todas las reglas CSS antes establecidas. Hemos utilizado animaciones CSS simples para mostrar la notificación de Snackbar a los usuarios desvaneciéndose en la pantalla y desapareciendo de ella. Puede encontrar una explicación detallada aquí . El tiempo total establecido para las animaciones CSS depende del límite de tiempo durante el cual queremos que la notificación sea visible para el usuario. El tiempo para el desvanecimiento de la animación CSS se calcula restando 0,5 segundos del tiempo total en nuestro caso.

CSS

#snackbar {
    /* By Default, Hidden */
    visibility: hidden; 
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 2px;
    padding: 16px;
    /* To always Keep on 
       Top of screen */
    position: fixed;
  
    /* To be displayed above 
       Parent HTML DOM element  */ 
    z-index: 1; 
  
    /* Position Bottom Left 
       Corner of Screen */
    left: 10px;
    bottom: 30px;
}
  
/* Dynamically Appending this 
   Class to #snackbar via JS */
.show-bar {
    visibility: visible !important;
    /* fadeout Time decided in 
       accordance to Total Time */
    /* In case, Time = 3s, 
       fadeout 0.5s 2.5s */
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
  
/* when the Snackbar Appears */
@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}
  
/* when the Snackbar Disappears
   from the Screen */
@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

index.js: hemos utilizado JavaScript para agregar dinámicamente una clase al elemento div HTML en el momento en que se hace clic en el botón Mostrar Snackbar . La función showSnackbar() se activa mediante la propiedad del botón HTML onClick . La clase agregada dinámicamente agrega las reglas CSS al elemento HTML #snackbar que lo hace visible para el usuario. Hemos utilizado la función de JavaScript setTimeout() para eliminar dinámicamente la clase añadida previamente después de 5 segundos, lo que hará que desaparezca la notificación de Snackar.

JS

function showSnackbar() {
    var snackBar = 
      document.getElementById("snackbar")
    // Dynamically Appending class
    // to HTML element 
    snackBar.className = "show-bar";
  
    setTimeout(function () {
       // Dynamically Removing the Class 
       // from HTML element
       // By Replacing it with an Empty
       // String after 5 seconds
       snackBar.className = 
          snackBar.className.replace("show-bar", ""); 
    }, 5000);
}

Paso 3: Hemos implementado con éxito las notificaciones de Snackbar utilizando HTML, CSS y JavaScript. En HTML, hemos definido un botón Mostrar Snackbar personalizado que activará la notificación de Snackbar en la pantalla. La notificación de Snackbar es un simple mensaje de texto que se muestra al usuario. Dado que Snackbar es un simple elemento HTML «div», podemos agregar acciones personalizadas a la notificación de Snackbar. Por ejemplo, un «cuadro de entrada» o un «botón de descartar», si es necesario. En nuestro caso, la notificación de snack bar desaparecerá automáticamente de la pantalla después de 5 segundos.
Producción:
Paso 4: En este Punto nuestra Notificación de Snackbar está lista. Para iniciar la aplicación usando Browsersync, ejecute el siguiente comando en el directorio del proyecto o puede ejecutar el archivo HTML directamente en su navegador.
```
browser-sync start --server --files "*"
```
Esto inicia Browsersync en modo servidor y observa todos los archivos dentro del directorio en busca de cambios según lo especificado por el comodín * . La aplicación se iniciará en http://localhost:3000/ de forma predeterminada.

Producción:

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

CSS

JS

Deja una respuesta Cancelar la respuesta