Alertas bonitos, responsivos e customizados com o SweetAlert2
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.
Versão em vídeo
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:
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:
npm install --save sweetalert2Também é possível baixá-lo importá-lo para dentro do projeto ou utilizar um CDN:
<script src="sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">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!”:
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:
Mas o SweetAlert2 é capaz de bem 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:
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.
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:
- Requisições AJAX
- 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)
- E muito mais!
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.
Referências
Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br • Facebook, Twitter, Youtube
Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.br • Twitter, LinkedIn
Aprenda mais com nossos cursos de programação online!
ECMAScript 6 • ECMAScript 7 e 8 • React 16 • VS Code • Mais
