en angular, Javascript, Recursos, Varios

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

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)