API — Modales (notify)

Métodos abreviados

Método Descripción
notify.success(msg, title?, opts?) Modal de éxito (verde)
notify.error(msg, title?, opts?) Modal de error (rojo)
notify.warning(msg, title?, opts?) Modal de advertencia (amarillo)
notify.info(msg, title?, opts?) Modal informativo (azul)
notify.question(msg, title?, opts?) Modal de pregunta (morado)

Todos retornan Promise<void> que resuelve cuando el modal se cierra.

await notify.success('¡Usuario creado!', 'Éxito');
// continúa aquí después de que el usuario cierre el modal

notify.show(options)

Método principal que acepta todas las opciones.

notify.show(options: NotificationOptions): Promise<void>

NotificationOptions

Propiedad Tipo Por defecto Descripción
type 'success' | 'error' | 'warning' | 'info' | 'question' 'info' Tipo de notificación
title string Título del modal
message string Mensaje principal
buttonText string 'Aceptar' Texto del botón principal
buttons ButtonOptions[] Múltiples botones personalizados
showCloseButton boolean true Muestra el botón ×
allowOutsideClick boolean true Cerrar al hacer click fuera
allowEscapeKey boolean true Cerrar con tecla Escape
timer number 0 Auto-cierre en ms (0 = desactivado)
hideButton boolean false Oculta el botón (útil para loading)
onClose () => void Callback al cerrar
anim AnimationOptions Opciones de animación

ButtonOptions

interface ButtonOptions {
  text: string;
  color?: string;        // color de fondo del botón
  textColor?: string;    // color del texto
  action?: 'confirm' | 'close' | 'custom';
  onClick?: () => void;  // callback personalizado
}

AnimationOptions

interface AnimationOptions {
  duration?: number;     // duración en ms (por defecto: 400)
  easing?: string;       // nombre easing (ver tabla de easings)
  overlayEasing?: string;
  boxEasing?: string;
}

Tabla de easings disponibles

Nombre Equivalente CSS
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeOutBack cubic-bezier(0.34, 1.56, 0.64, 1)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
ease ease (CSS nativo)
ease-in ease-in (CSS nativo)
ease-out ease-out (CSS nativo)
ease-in-out ease-in-out (CSS nativo)
cubic-bezier(...) Passthrough — cualquier valor CSS válido
Easings de anime.js

Los nombres de easing de anime.js (easeOutQuad, easeInBack, etc.) siguen siendo válidos en v2. Los easings sin equivalente CSS (easeInElastic, spring, etc.) se ignoran silenciosamente.


notify.close()

Cierra el modal activo programáticamente.

notify.close();

Ejemplos avanzados

Confirmación con dos botones

let confirmed = false;

await notify.show({
  type: 'question',
  title: '¿Eliminar registro?',
  message: 'Esta acción no se puede deshacer.',
  showCloseButton: false,
  allowOutsideClick: false,
  buttons: [
    { text: 'Cancelar', color: '#6b7280', action: 'close' },
    {
      text: 'Eliminar',
      color: '#ef4444',
      action: 'custom',
      onClick: () => { confirmed = true; notify.close(); }
    }
  ]
});

if (confirmed) {
  await deleteRecord();
}

Modal de progreso

notify.show({
  type: 'info',
  title: 'Exportando...',
  message: 'Generando el archivo PDF',
  hideButton: true,
  allowOutsideClick: false,
  allowEscapeKey: false
});

await generatePDF();
notify.close();
notify.toastSuccess('PDF generado correctamente');