Sweet Alert
El objetivo principal de un Sweet Alert es lanzar notificaciones, alertas, confirmaciones de manera simple y con contenido personalizable. Un Sweet Alert es una superposición que requiere que el usuario interactúe con él y está diseñado para obtener una respuesta rápida por parte del usuario. Estos informan a los usuarios sobre información crítica, dar un feedback positivo sobre una acción, entregar información, informar un error o una alerta por lo que requieren que los usuarios tomen decisiones. Se utilizan para dirigir la atención del usuario a una tarea específica, sin apartarlo del contexto de la pantalla actual.
Playground
Tipo de Sweet Alert
- Ruby
- Html
- Groovy
<%= btn_primary 'Activar Sweeet Alert', data: {
confirm_swal: '¿Te ha gustado hasta ahora el Sweet Alert?',
confirm_swal_accept: 'Aceptar',
confirm_swal_decline: 'Cancelar',
confirm_swal_icon: 'success'
} %>
<!-- Ejemplo general en un archivo HTML base -->
<body>
<button onclick="mostrarSweetAlert()">Mostrar Sweet Alert</button>
<script>
function mostrarSweetAlert() {
swal.fire({
title: title ? title : message,
text: title ? message : null,
icon: icon,
html: html,
confirmButtonText: confirmButtonText,
showCancelButton: cancelButtonText != null,
cancelButtonText: cancelButtonText,
showCloseButton: true,
closeButtonHtml: '<span class="material-icons">close</span>',
reverseButtons: true,
customClass: {
confirmButton: customConfirmButton ? customConfirmButton : '',
},
});
}
</script>
</body>
<link href='<g:resource dir="sb-admin-2"/>/css/plugins/sweetalert.min.css' rel="stylesheet" />
<script>
swal.fire({
title: title ? title : message,
text: title ? message : null,
icon: icon,
html: html,
confirmButtonText: confirmButtonText,
showCancelButton: cancelButtonText != null,
cancelButtonText: cancelButtonText,
showCloseButton: true,
closeButtonHtml: '<span class="material-icons">close</span>',
reverseButtons: true,
customClass: {
confirmButton: customConfirmButton ? customConfirmButton : '',
},
});
</script>
<script type="text/javascript" src="<g:resource dir='js'/>/plugins/sweetalert/sweetalert.min.js"></script>
Lista de parámetros
| Parámetro | Tipo | Detalle |
| confirm-swal | String | Define el titulo que tendrá el Sweet Alert |
| confirm-swal-secondary-message | String | (Opcional) Define el mensaje que tendrá el Sweet Alert |
| confirm-swal-custom-accept | String | (Opcional)btn-destructiveNos servirá para aquellos casos donde la acción a realizar sea la de "Eliminar" |
| confirm-swal-accept | String | Define el texto del botón primario, debiese ser "Aceptar" o "Eliminar" |
| confirm-swal-decline | String | Define el texto del botón secundario, debiese ser "Cancelar" |
| confirm-swal-icon | String | Define el ícono del Sweet Alert, las opciones son: success, info, error, warning, question |
| confirm-swal-html | String | (Opcional) Permite insertar html en el Sweet Alert, solo para casos particulares |
| swal-input | Boolean | Define el uso del input en el sweet alert |
| swal-input-validator | String | Define el texto que se debe ingresar para ejecutar la acción |
| swal-input-validation-message | String | Define el mensaje de error al no ingresar el texto configurado |
| swal-input-type | String | (Opcional) Define el tipo de input, 'text' por defecto |
| swal-input-placeholder | String | (Opcional) Define el placeholder en el input |
Anatomía
1. Title icon
Encabezado del sweet alert. Este siempre debe ir acompañado de los iconos estandarizados para cada acción de alerta.
2. Header
Encabezado del sweet alert. Este siempre debe ir acompañado de los iconos estandarizados para cada acción de alerta.
3. Close
Acción para cerrar el Sweet Alert.
4. Contenedor
Es donde se ubica el contenido del sweet alert.
5. Body
Cuerpo de texto del sweet alert.
6. Input de confirmación (opcional)
Input para confirmar que el usuario hará algo y se necesita confirmar dos veces para asegurar que no sea un error
7. Footer Actions
Uso de componente footer actions.
¿Cuando usarlos?
Tiene más sentido usar un sweet alert en situaciones en las que necesita que el usuario interactúe antes de continuar, o cuando el costo de un error podría ser muy alto. Ver el siguiente ejemplo:
¿Cuando no usarlos?
- No deben abrirse de manera automática
- Abrir de repente un Sweet Alert sin que el usuario haya hecho nada es una pésima idea
- No usarlo cuando la información no es relevante o interrumpe el flujo
Siempre debe abrirse un Sweet Alert cuando el usuario hace (o hizo) algo en una página. Ese algo podría ser hacer clic en un botón, seguir un enlace o seleccionar una opción.
Debe hablar un idioma simple y fácil de comprender, (usar palabras, frases y conceptos familiares para el usuario), en lugar de términos especiales del sistema.
Preguntas y opciones claras
Se deben escribir preguntas con un lenguaje claro. Un ejemplo sería cuando se les pide a los usuarios que eliminen sus archivos, en lugar de decir "¿Liberas tu almacenamiento?" pregunta: "¿Quieres eliminar tus archivos?" En general, se debe evitar las disculpas, la ambigüedades.
Un mal ejemplo
En este ejemplo, el texto de acción "No" responde a la pregunta, pero no sugiere lo que sucederá después.
Un buen ejemplo
El texto de acción afirmativa "Aceptar" indica claramente el resultado de la decisión.
El Sweet Alert, muestra 5 tipos de cuadros de diálogo para cada ocasión:
Accesibilidad
El sweet alert no debe desaparecer antes que el usuario presione cerrar o un botón explícito “Cancelar” o “Aceptar” o realice otra acción que cierre el modal.
Mobile
En mobile y dispositivos que tienen el tacto como el método principal de interacción, los sweetalerts tendrán una distribución al centro y con la disposición del icono principal sobre el título.
A continuación se muestra un ejemplo sobre ese contexto:
Números de elementos y acciones
- No deberían incluir más de 2 acciones
- Una tercera acción, como "Más información", que normalmente se utiliza para alejar a los usuarios del cuadro de diálogo, aumenta el riesgo de dejar la tarea sin terminar
- No incluir multiples pasos
- Elimina elementos o contenido innecesarios que no admiten las tareas del usuario