SweetAlert2

SweetAlert2 Configuración

Instalación Paso 1

npm install sweetalert2

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Integración Básica Paso 2

HTML y JavaScript

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
  <button onclick="mostrarAlerta()">Mostrar Alerta</button>

  <script>
    function mostrarAlerta() {
      Swal.fire({
        title: '¡Hola!',
        text: 'Esto es SweetAlert2',
        icon: 'success',
        confirmButtonText: 'OK'
      })
    }
  </script>
</body>
</html>

Vue.js

<template>
  <button @click="mostrarAlerta">Mostrar Alerta</button>
</template>

<script>
import Swal from 'sweetalert2'

export default {
  name: 'App',
  methods: {
    mostrarAlerta() {
      Swal.fire({
        title: '¡Hola Vue!',
        text: 'Esto es SweetAlert2',
        icon: 'success',
        confirmButtonText: 'OK'
      })
    }
  }
}
</script>

Angular

Primero, importa las dependencias:

import { Component } from '@angular/core';
import Swal from 'sweetalert2';

Luego, define el componente:

@Component({
  selector: 'app-root',
  template: `
    <button (click)="mostrarAlerta()">Mostrar Alerta</button>
  `
})

Finalmente, implementa la lógica:

export class AppComponent {
  mostrarAlerta() {
    Swal.fire({
      title: '¡Hola Angular!',
      text: 'Esto es SweetAlert2',
      icon: 'success',
      confirmButtonText: 'OK'
    });
  }
}

Tipos de Alertas Paso 3

Alertas Básicas

// Éxito
Swal.fire({
title: '¡Éxito!',
text: 'Operación completada',
icon: 'success'
})

// Error
Swal.fire({
title: '¡Error!',
text: 'Algo salió mal',
icon: 'error'
})

// Advertencia
Swal.fire({
title: '¡Cuidado!',
text: '¿Estás seguro?',
icon: 'warning'
})

// Información
Swal.fire({
title: 'Info',
text: 'Información importante',
icon: 'info'
})

// Pregunta
Swal.fire({
title: '¿Continuar?',
text: '¿Deseas proceder?',
icon: 'question'
})

Alertas con Confirmación

Swal.fire({
title: '¿Estás seguro?',
text: "¡No podrás revertir esto!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Sí, eliminar',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.isConfirmed) {
  Swal.fire(
    '¡Eliminado!',
    'El archivo ha sido eliminado.',
    'success'
  )
}
})

Personalización Paso 4

Estilos y Temas

// Personalizar colores y estilos
Swal.fire({
title: 'Alerta personalizada',
text: 'Con estilos personalizados',
background: '#fff',
backdrop: 'rgba(0,0,123,0.4)',
customClass: {
  container: 'mi-contenedor',
  popup: 'mi-popup',
  header: 'mi-header',
  title: 'mi-titulo',
  closeButton: 'mi-boton-cerrar',
  icon: 'mi-icono',
  image: 'mi-imagen',
  content: 'mi-contenido',
  input: 'mi-input',
  actions: 'mi-acciones',
  confirmButton: 'mi-boton-confirmar',
  cancelButton: 'mi-boton-cancelar',
  footer: 'mi-footer'
}
})

// CSS personalizado
.mi-popup {
border-radius: 15px;
font-family: 'Arial', sans-serif;
}

.mi-titulo {
color: #1a365d;
}

Inputs y Formularios

// Input de texto
Swal.fire({
title: 'Ingresa tu nombre',
input: 'text',
inputPlaceholder: 'Nombre',
showCancelButton: true
})

// Email
Swal.fire({
title: 'Ingresa tu email',
input: 'email',
inputPlaceholder: 'email@ejemplo.com'
})

// Selección
Swal.fire({
title: 'Selecciona una opción',
input: 'select',
inputOptions: {
  'opcion1': 'Opción 1',
  'opcion2': 'Opción 2',
  'opcion3': 'Opción 3'
}
})

Funciones Avanzadas Paso 5

Promesas y Async/Await

async function confirmarEliminacion() {
try {
  const result = await Swal.fire({
    title: '¿Eliminar?',
    text: '¿Estás seguro?',
    icon: 'warning',
    showCancelButton: true
  })

  if (result.isConfirmed) {
    // Realizar operación asíncrona
    await eliminarRegistro()

    Swal.fire(
      '¡Eliminado!',
      'Registro eliminado con éxito',
      'success'
    )
  }
} catch (error) {
  Swal.fire(
    'Error',
    'No se pudo eliminar el registro',
    'error'
  )
}
}

Alertas Encadenadas

Swal.mixin({
input: 'text',
confirmButtonText: 'Siguiente &rarr;',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
  title: 'Pregunta 1',
  text: '¿Cuál es tu nombre?'
},
{
  title: 'Pregunta 2',
  text: '¿Cuál es tu email?'
},
{
  title: 'Pregunta 3',
  text: '¿Cuál es tu edad?'
}
]).then((result) => {
if (result.value) {
  const respuestas = result.value
  Swal.fire({
    title: '¡Completado!',
    html: `
      Tus respuestas:
      <pre>
        ${JSON.stringify(respuestas, null, 2)}
      </pre>
    `,
    confirmButtonText: 'OK'
  })
}
})

Mejores Prácticas Recomendado

1. Configuración Global

import Swal from 'sweetalert2'

export const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
})

export const ConfirmDialog = Swal.mixin({
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33'
})

2. Componente Reutilizable

import Swal from 'sweetalert2'

export const showAlert = ({
title = '',
text = '',
icon = 'info',
...props
}) => {
return Swal.fire({
  title,
  text,
  icon,
  ...props
})
}

// Uso
showAlert({
title: '¡Éxito!',
text: 'Operación completada',
icon: 'success'
})

3. Manejo de Errores

async function handleSubmit() {
try {
  // Mostrar loading
  Swal.fire({
    title: 'Procesando...',
    allowOutsideClick: false,
    didOpen: () => {
      Swal.showLoading()
    }
  })

  await submitForm()

  // Éxito
  Swal.fire({
    icon: 'success',
    title: '¡Enviado!',
    timer: 2000
  })
} catch (error) {
  // Error
  Swal.fire({
    icon: 'error',
    title: 'Error',
    text: error.message
  })
}
}

🐝