A maioria das aplicações web precisam, em algum momento retornar um feedback para o usuário, ou solicitar alguma informação através de janelas de alerta ou janelas pop-up. O javascript puro oferece as funções alert, confirm e prompt para tal propósito, mas além de bloquear o navegador, o layout dessas janelas não é configurável, variando de acordo com o navegador.
Devido a esses problemas, a maioria das pessoas preferem desenvolver suas próprias janelas pop-up com o uso de div e CSS. Essa solução funciona bem, se você tiver bastante paciência para definir a janela, manipular a interação através do javascript, tratar incompatibilidades de browser etc.
Para quem não quer ter todo esse trabalho, existem APIs específicas para exibição de janelas que já vem com um layout padrão, mas que pode ser alterado via CSS, e já trata da interação da janela de forma simples.
Nesse post vou descrever uma dessas APIs, o SweetAlert, que fornece alertas bastante agradáveis, e que podem ser utilizadas de forma bem simples.
Instalação e Uso
Você pode usar diretamente pelo link do SweetAlert, exemplo:
Use a função
swal, sw eet al ert
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<a href="#" onclick="swal('Testanto o SweetAlert.');">Clique aqui</a>Após clicar vai surgir a mensagem assim:
Ou baixando e linkando localmente, exemplo:
wget https://unpkg.com/sweetalert/dist/sweetalert.min.js<script src="sweetalert.min.js"></script>
<a href="#" onclick="swal('Testanto o SweetAlert.');">Clique aqui</a>
Ainda pode usar com combinado NPM/Yarn com uma ferramenta como o Browserify ou Webpack que é a maneira mais correta de uso e você pode customizar diversos outros tipos de mensagens: .
npm install sweetalert --saveEm seguida, basta importá-lo para o seu aplicativo:
import swal from 'sweetalert';Para mais informações de uso como exemplos para React.js e Vue.js consulte o guia completo: https://sweetalert.js.org/guides/
Conheça também o sweetalert2 que há outras formas de implementações, como por exemplo com o Angular.js.
Ainda não aprendeu Javascript? Assista o vídeo abaixo e entre para esse vasto mundo!
Até mais!
Links úteis
- https://sweetalert.js.org/
- https://sweetalert2.github.io/
- http://browserify.org/
- https://reactjs.org/
- http://www.matera.com/blog/post/alertas-amigaveis-com-a-api-sweetalert
- https://terminalroot.com.br/css
- https://terminalroot.com.br/html
javascript reactjs vuejs angularjs sweetalert html css
