Alertas bonitos, responsivos e customizados com o SweetAlert2 | iMasters
Tem 100 artigos publicados com 110434 visualizações desde 2013
Quando estamos falando de desenvolvimento web, há praticamente duas coisas que todo(a) programador(a) provavelmente já fez:
Usar console.log() para debugar o código;
Usar o alert() para exibir mensagens na tela.
Apesar de ambos funcionarem bem e nos ajudarem a desenvolver nossos sistemas, são totalmente inadequados para sistemas em produção. É por esse motivo que neste artigo, quero te apresentar o SweetAlert2, uma biblioteca JavaScript que nos ajuda na criação de alertas que sejam bonitos, responsivos e customizados. Tudo isso sem nenhuma outra dependência.
Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos assistindo o vídeo abaixo:
Conheça o SweetAlert2
O SweetAlert2 é uma biblioteca JavaScript que nos auxilia na criação de alertas em nossas aplicações web. O projeto é de código aberto e está disponível no GitHub sob a licença MIT. Atualmente está na versão 7.12.15. Seu sucesso é tanto que já ultrapassou as 5 mil estrelas (quase alcançando 6 mil), 700 forks e 279 releases.
E o melhor de tudo é que ele é compatível com todos os navegadores atuais:
Para os navegadores marcados com *, precisamos utilizar um polyfill para as Promises do ES6
Instalação do SweetAlert2
A utilização da biblioteca é muito simples. Primeiramente, é necessário importá-lo para o seu projeto. É possível utilizar o npm:
Também é possível baixá-lo importá-lo para dentro do projeto ou utilizar um CDN:
Criando alertas magníficos
Uma vez importado, utilizamos o método swal para criar os alertas. O alerta mais simples é criado apenas passando como parâmetro a mensagem que desejamos exibir, como no exemplo a seguir, onde apenas exibimos a mensagem "Olá mundo!":
See the Pen SweetAlert2 – Exemplo 1 by Diego Martins de Pinho (@DiegoPinho) on CodePen.
Para tornar as coisas mais interessantes, podemos utilizar alguns dos alertas padrões, como no exemplo abaixo, onde exibimos uma mensagem de erro e de sucesso, apenas especificando o seu tipo (bem semelhante ao que temos no bootstrap) na chamada do método:
See the Pen SweetAlert2 – Exemplo 2 by Diego Martins de Pinho (@DiegoPinho) on CodePen.
Mas o SweetAlert2 é capaz de muito mais. No exemplo abaixo criamos um alerta com várias configurações, como o título, texto, tipo, se deve mostrar os botões de confirmação, de cancelamento; e o que fazer se o usuário clicar em cada um deles:
See the Pen SweetAlert2 – Exemplo 3 by Diego Martins de Pinho (@DiegoPinho) on CodePen.
Também conseguimos criar alertas bem complexos como este abaixo, onde temos várias perguntas que devem ser respondidas em sequência. Para este exemplo, utilizamos mais alguns métodos e configurações, como é o caso do método queue, setDefaults e resetDefaults. Os utilizamos para definir a ordem das perguntas, configurar o visual delas e resetar o visual para o padrão, respectivamente.
See the Pen SweetAlert2 – Exemplo 4 by Diego Martins de Pinho (@DiegoPinho) on CodePen.
Bem bacana, não é mesmo? Eu poderia continuar mostrando diversos exemplos do que a biblioteca é capaz, mas no próprio site oficial há uma série de outros exemplos, tais como alertas com:
Layout customizado (fundo, imagem, cores, etc)
Posicionamento diferente (repare que por padrão ele coloca sempre no meio, independente do tamanho do seu device!)
Fechamento automático (auto close timer)
Todas as demais configurações possíveis, tipos de input, métodos, eventos e afins estão disponíveis no site também.
Indo além com o SweetAlert2
Por mais bacana que o projeto seja, muitos(as) desenvolvedores(as) podem se incomodar com o fato de que ele é JavaScript puro. É por esse motivo que a comunidade se uniu para suportar o projeto dentro de outras tecnologias, como o Angular, React e o Vue.