Como Crear una Notificación de tipo Toast con Bootstrap 4 y Javascript

Demo Github

El Framework para Desarrollo Front Bootstrap esta actualizándose constantemente, cada nueva versión nos sorprende con nuevos Componentes, Utilidades, etc. En la versión de Bootstrap 4.2 ha lanzado el componente llamado Toast, que es similar a las notificaciones que lanzan las aplicaciones móviles después de realizar una determinada tarea, en este tutorial vamos a Crear una Notificación Toast con Bootstrap 4 y Javascript, vamos con el tutorial.

Si no conoces sobre Bootstrap, pues antes de continuar con este Tutorial te recomiendo leer el artículo Que es Bootstrap, Historia y tu Primer Hola Mundo, si ya conoces sobre Bootstrap, pues adelante, puedes continuar con este Post.

Lo primero que haré es crear la vista HTML de mi Toast, el cual usaré para mostrar la notificación, dentro del div con la class=”toast” voy a colocar los elementos de mi Toast y le agrego el id=”mitoast”

Ahora creare la cabecera para mi Toast y debajo un botón en forma de x para cerrar el Toast, en el código he colocado comentarios para explicar que función cumple cada elemento

Puedes ver que en el botón para Cerrar el Toast le estoy diciendo que al hacer clic en el botón llame a la función cerrarToast(), esta función la crearé más adelante con Javascript y lo que hará esta función es cerrar el Toast de la vista del usuario

Mi Toast ya casi esta listo, eso es lo genial de usar un Componente de Bootstrap, agiliza el proceso de Diseño de una interface Front, mi Toast tiene el siguiente Aspecto

Para este ejemplo voy a utilizar un botón, cuando este botón es presionado llamo a la función Javascript mostrarToast() y el sistema lanzará la Notificación Toast

Voy a darle unos estilos CSS para mejorar la interface de mi Toast, voy a crear un archivo llamado estilos.css y agrego lo siguiente

Ahora para mi código Javascript voy a crear un archivo llamado app.js en donde colocaré las 2 funciones, una es mostrarToast() y la otra es cerrarToast()

En la función mostrarToast() lo que hago es que cuando el botón se presiona al contenedor de mi Toast le asigno la clase CSS llamada mostrar la cual contiene una animación con keyframes de CSS fadein y fadeout y después de 5 segundos le quito la clase mostrar y que desaparezca el Toast automáticamente

A continuación los estilos para la clase mostrar anidada con el id #mitoast y debajo las animaciones keyframes fadein y fadeout las cuales se encargan de llevar acabo una animación para hacer aparecer y desvanecer el Toast

La otra función llamada cerrarToast() se encargará de Cerrar el Toast, cuando se haga clic en el botón x del Toast lo que haré es asignar la clase CSS cerrar al contenedor de mi Toast y mediante una animación keyframe de tipo fadeout hago que desparezca el Toast de inmediato

A continuación los estilos para la clase cerrar anidada con el id #mitoast y debajo la animación keyframe de tipo fadeout

Bien eso es todo, a continuación mi archivo estilos.css con todos los estilos y animaciones CSS

Y mi archivo app.js con ambas funciones Javascript

Para ver el el Proyecto en funcionamiento, al inicio de este Tutorial he colocado una Demo, asimismo el repositorio GitHub con el código de este proyecto.

Conclusión

Los Toast son unos bonitos componentes que si le sacamos provecho nos pueden servir mucho para crear aplicaciones en donde necesitemos mostrar mensajes a los usuarios, si deseas saber más sobre los Toasts de Bootstrap puedes revisar la documentación oficial.

Notas

• El Componente Toast puede ser usado a partir de la versión Bootstrap 4.2
• En futuras versiones de Bootstrap el componente Toast puede ser eliminado, modificado o puede continuar, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Bootstrap.
• Los pasos mencionados en este Tutorial pueden ser modificados en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Bootstrap y Javascript.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos