{"id":28421,"date":"2021-06-10T18:45:00","date_gmt":"2021-06-10T15:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28421"},"modified":"2021-10-18T04:01:01","modified_gmt":"2021-10-18T01:01:01","slug":"sweetalert-uma-bela-substituicao-para-caixas-de-dialogo-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/sweetalert-uma-bela-substituicao-para-caixas-de-dialogo-javascript\/","title":{"rendered":"SweetAlert – Uma bela substitui\u00e7\u00e3o para caixas de di\u00e1logo JavaScript"},"content":{"rendered":"

JavaScript est\u00e1 embutido em todos os navegadores. JavaScript fornece caixas de di\u00e1logo (alerta, confirma\u00e7\u00e3o, prompt) que est\u00e3o dispon\u00edveis em todos os principais navegadores. Cada navegador mostra essas caixas de di\u00e1logo de maneira diferente em termos de interface do usu\u00e1rio.<\/p>\n

Ao construir um aplicativo, nosso foco principal \u00e9 a experi\u00eancia do usu\u00e1rio. E em algum lugar, as caixas de di\u00e1logo do JavaScript n\u00e3o est\u00e3o fornecendo uma boa experi\u00eancia do usu\u00e1rio. Isso ocorre porque em cada navegador essas caixas t\u00eam uma interface do usu\u00e1rio diferente que, de alguma forma, quebra a consist\u00eancia da apar\u00eancia.<\/p>\n

Neste artigo, discutimos o SweetAlert,<\/a> que \u00e9 um belo substituto para as caixas de di\u00e1logo JavaScript. Al\u00e9m desses alertas b\u00e1sicos, SweetAlert fornece muito mais mensagens de sucesso | erro, modelos de aviso, tratamento de Ajax em pop-ups, etc.<\/p>\n

Caixas de Di\u00e1logo SweetAlert<\/h3>\n

Ao usar SweetAlert, teremos controle total sobre o texto e os bot\u00f5es das caixas de di\u00e1logo. Podemos alterar o texto do t\u00edtulo, o texto do bot\u00e3o conforme nossa conveni\u00eancia.<\/p>\n

Abaixo est\u00e3o alguns exemplos de caixas de di\u00e1logo SweetAlert.<\/p>\n

Caixa de Di\u00e1logo de Alerta<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Caixa de di\u00e1logo de confirma\u00e7\u00e3o<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Caixa de Di\u00e1logo Prompt<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Como usar SweetAlert<\/h3>\n

Usar SweetAlert no aplicativo \u00e9 um processo direto. Exige que incluamos seu arquivo JS e somos bons em usar os m\u00e9todos da biblioteca SweetAlert.<\/p>\n

Exemplo de caixa de alerta<\/h4>\n
<script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"><\/script>\n<script>\nswal(\"Hello world!\");\n<\/script><\/code><\/pre>\n
Ao usar SweetAlert, voc\u00ea deve usar a swal<\/code>fun\u00e7\u00e3o para chamar os diferentes tipos de caixas de di\u00e1logo. O c\u00f3digo acima exibir\u00e1 um pop-up com o texto ‘Ol\u00e1, mundo!’.<\/p>\n
Tamb\u00e9m podemos definir o t\u00edtulo modal e o texto da seguinte maneira;<\/p>\n
swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n
Se voc\u00ea quiser mostrar um pop-up com base na natureza da opera\u00e7\u00e3o, passe o terceiro argumento. O terceiro argumento pode ser “sucesso", “aviso”, “erro”, “informa\u00e7\u00e3o”.<\/p>\n
swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n
Experimente todos os valores do terceiro argumento e voc\u00ea obter\u00e1 uma IU diferente em cada um deles.<\/p>\n
Exemplo de caixa de confirma\u00e7\u00e3o<\/h4>\n
Para usar a caixa de confirma\u00e7\u00e3o SweetAlert, use o c\u00f3digo abaixo:<\/p>\n
swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) => {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
\u00c0s vezes, precisamos enviar solicita\u00e7\u00f5es AJAX com a caixa de di\u00e1logo de confirma\u00e7\u00e3o. Nesse caso, enviamos uma solicita\u00e7\u00e3o AJAX ap\u00f3s clicar no bot\u00e3o confirmar e, em seguida, tratamos a resposta da seguinte maneira.<\/p>\n
swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) => {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jQuery.get('ajax.php', function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == true) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Exemplo de caixa de prompt<\/h4>\n
Uma caixa de di\u00e1logo de prompt raramente \u00e9 usada no site. No entanto, se algu\u00e9m quiser us\u00e1-lo com o SwetAlert, use o c\u00f3digo abaixo.<\/p>\n
swal(\"Write something here:\", {\n\u00a0\u00a0\u00a0\u00a0content: \"input\",\n})\n.then((value) => {\n\u00a0\u00a0\u00a0\u00a0swal(`You typed: ${value}`);\n});<\/code><\/pre>\n
Estes s\u00e3o os princ\u00edpios b\u00e1sicos da biblioteca SweetAlert. Voc\u00ea pode explorar mais na documenta\u00e7\u00e3o<\/a> SweetAlert .<\/p>\n
Artigos relacionados<\/h4>\n