0
362
ViewsCómo colocar el ícono y el texto horizontalmente usando la biblioteca SweetAlert2
Quiero cambiar la posición de un ícono en SweetAlert2 para alinearlo horizontalmente con un fragmento de texto. (Creo que debería usar display: flex , pero que yo sepa, no hay forma de poner la clase de icono dentro de un div al lado de la clase de texto).
Así luce la alerta en este momento:
Y así es como quiero que se vea:
Aquí está el código de mi alerta:
Swal.fire({ html: '<span class="text">Congratulations</span>', icon: 'success', showConfirmButton: false, position: 'bottom-end', customClass: { popup: 'swal-wide', icon: 'icon-class' } })Y aquí está mi archivo CSS (actualmente no tiene nada importante):
.icon-class{ font-size: 10px; } .text{ font-size: 15px; } @media screen and (min-width: 761px){ .swal-wide{ width: 23% !important; } } @media screen and (max-width: 760px){ .swal-wide{ width: 100% !important; } }1 answers
Answer question0
No puedo ver nada en la documentación de SweetAlert2 que le permita hacer esto, pero podría estar equivocado.
Sin embargo, tiene razón, es posible usar divs y flexbox para lograr el efecto que desea, sin embargo, es un poco complicado.
Si deshabilita los botones, deberá implementar algún otro método para eliminar el cuadro de alerta dulce.
El ícono se dibuja como un svg dentro de la propiedad html , todo dentro de algunos divs .
Swal.fire({ html: '<div class="container"><div><svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="5 5 40 40"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg></div><div class="textDiv">Congratulations</div></div>', position: 'bottom-end', showConfirmButton: false, customClass: { popup: 'swal-wide', icon: 'icon-class' } }) .icon-class { font-size: 10px; } .text { font-size: 15px; } @media screen and (min-width: 761px) { .swal-wide { width: 40% !important; } } @media screen and (max-width: 760px) { .swal-wide { width: 100% !important; } } .checkmark { width: 40px; height: 40px; border-radius: 50%; border: solid 2px green; display: block; stroke-width: 2; stroke: green; stroke-miterlimit: 10; stroke-dashoffset: 0; margin: 10% auto; } .container { display: flex; justify-content: center; ; } .textDiv { padding-left: 10px; padding-top: 16px; font-family: 'Gill Sans', sans-serif; } <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>