Notificaciones al usuario con SweetAlert

SweetAlert

Siempre es importante dar respuestas a las acciones realizadas por el usuario y hay muchas formas de lanzar notificaciones o alertas en una web o sistema web. La idea es dejar de usar el famoso alert() de javascript que, aunque funciona no es estético por su diseño y animación antigua... Así que para esta solución tenemos Sweet Alert, con ella conseguimos dar notificaciones y alertas hermosas, estéticas y mucho mas funcional.


Con Sweet Alert se busca reemplazar el aburrido mensaje de alert o confirm nativo de javascript, luego de este artículo tendrás un resultado mucho más agradable, con muy pocas líneas de código.

Sin sweetalert

<script>
    alert("Oops, Algo salió mal!!");
</script>

Con sweetalert

<script>
    swal("Oops, Algo salió mal!!", "error");
</script>

Ejemplo real, estructura completa y fácil instalación usando CDN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sweetalert | Rimorsoft Online</title>
    </head>
    <body>

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script type="text/javascript">
            swal("Mensaje Simple!");
        </script>
    </body>
</html>

Así empezamos, es un mensaje muy sencillo, pero nos ayuda a ver en terminos generales la estructura e integración con el resto del proyecto... Con solo un poco de lógica puedes implementarlo en tus proyectos de inmediato. Al importar sweetalert.min.js en este caso desde un CDN vemos inmediatamente como funciona con estilo y animación.

Veamos más ejemplos:

Título y descripción

<script type="text/javascript">
    swal("Título", "Descripción");
</script>

Título, descripción, icono (info, warning, error y success)

<script type="text/javascript">
    swal("Título", "Descripción", "success");
    //Puedes colocar warning, error, success y por último info.
</script>

Con opciones

Es como me gusta usar la herramienta, de esta manera el control que tengo es mayor.

<script type="text/javascript">
    swal({
        title: "Título",
        text:  "Descripción",
        icon:  "success",
    });
</script>

Tenemos un repositorio en Github con ejemplos actualizados para que puedas descargarlos, copiar, pegar y lo que necesites para su comprensión. https://github.com/rimorsoft/Ejemplos-Sweet-Alert

Puedes hacer de todo con sweetalert, el resto de la información está en su página oficial https://sweetalert.js.org/docs

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Spatie/Laravel Permission ¿Cómo agregar campos en la tabla "roles"?

Hola, mi consulta es la siguiente:

Relacioné la tabla "roles" con mi tabla** "empresa**", es decir, en la tabla "roles", tengo el campo "id_empresa", en la vista, están los campos necesarios y el select de la empresa pero al querer guardar los datos, me arroja el siguiente error: ** "The given role or permission should use guard web instead of Empresas. "** No ...

SOFTWARE PARA CONSULTORIOS MEDICOS

Hola Amigos. soy nuevo en el grupo.. me gustaria saber si alguien tiene o tuvo algun proyecto basado en laravel, para consultorios medicos? ...

sincronización de componentes hermanos

un gran saludo a la comunidad rimorsorf... espero de su valiosa ayuda para mi problema que es el siguiente:

tengo dos componentes en el mismo nivel, el primero crea una tabla con una lista de procesos por tramitar y el segundo componente lista en una tabla los procesos que se han asignado para tramitar; cuando en la primera tabla se asigna el proceso este debe desaparecer de...

plantilla blade y vuejs2

buenas noches comunidad, por casualidad alguien sabrá si se puede integrar la plantilla de laravel blade en vuejs2 component??, gracias dee antemano...