X

SweetAlert2: El mejor sustituto de los alert

SweetAlert2 es una librería que nos ofrece un reemplazo bonito, responsive, accesible (WAI-ARIA) y configurable para los típicos alert

Es decir, que en vez de mostrar nuestros mensajes popup asi…

[advanced_iframe src=»//jsfiddle.net/juanma/LdLa5cv5/embedded/result,js,html/» width=»100%» height=»100″]

Los podemos mostrar así…

[advanced_iframe src=»//jsfiddle.net/juanma/kkjd1mea/embedded/result,js,html/» width=»100%» height=»400″]

Mucho mejor (más claros, más bonitos,…) los mensajes con SweetAlert2, ¿no?

¿Qué necesitamos para poder utilizar SweetAlert2 en nuestro proyecto?

Para utilizar SweetAlert2 en nuestro proyecto necesitamos cargar 3 cosas:

Los podemos descargar desde jsdelivr.com/sweetalert2 o cdnjs.com/limonte-sweetalert2 a nuestro proyecto y cargarlos en nuestro HTML desde su ubicación

También podemos instalar estos archivos con bower

bower install sweetalert2

…y luego cargarlos desde bower_components

O los podemos cargar directamente desde un CDN

<!-- These belongs to the HTML file where you want C3 to work - put these lines into your <head> tag -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.css" rel="stylesheet" type="text/css">

Tipos de Mensajes

Podemos mostrar estos 5 tipos de mensajes

[advanced_iframe src=»//jsfiddle.net/juanma/u23nafgz/embedded/result,js,html/» width=»100%» height=»450″]

¿Cómo lo utilizo en mi código?

Al cargar los archivos de esta libreria, tendrás disponible la función global swal a la que podrás llamar pasándole un objeto de configuración.

[advanced_iframe src=»//jsfiddle.net/juanma/utpgoL49/embedded/result,js,html/» width=»100%» height=»450″]

Esta función devolverá una promesa que podemos concatenar con diferentes then o catch para realizar acciones según la respuesta del usuario al mensaje

[advanced_iframe src=»//jsfiddle.net/juanma/46pu4njb/embedded/result,js,html/» width=»100%» height=»450″]

¿Y para utilizarlo en mi aplicación Angular 1.x?

Para angular 1.x hay un wrapper llamado ngSweetAlert que al cargarlo en nuestro proyecto nos deja disponible el modulo oitozero.ngSweetAlert que podemos poner como dependencia de nuestro modulo principal.

Con esto tendremos disponible el factory SweetAlert que podremos inyectar en nuestros controladores para acceder a su método swal que funciona tal y como hemos explicado antes

angular.module('mainApp',['oitozero.ngSweetAlert'])
  .controller('mainController', function($scope, SweetAlert) {
    $scope.clickMeToShowMessage = function() {
      SweetAlert.swal({
        type: 'info',
        title: 'Hey, this is important',
        text: 'You rocks!',
    	})
    }
  })

[advanced_iframe src=»//jsfiddle.net/juanma/78fgo5dy/embedded/result,js,html/» width=»100%» height=»450″]

Post Anterior
Post Siguiente
JuanMa Garrido: Senior Frontend Developer y Frontend Trainer, #Javascript specialist, co-founder de anotherWaves, administrador de pixelovers, autor de Apuntes de Javascript