🍞 Toast Modern

Un sistema de notificaciones Toast elegante, ligero y sin dependencias externas. Diseñado con estilo "Glassmorphism" y animaciones fluidas para Angular.

✨ Características

• 🎨 Diseño Moderno: Estilo visual con desenfoque (backdrop-blur) y sombras suaves.
• ⚡ Cero Dependencias: No requiere Tailwind CSS, Bootstrap ni librerías de iconos. Funciona por sí solo.
• ⏱️ Auto-cierre: Las alertas desaparecen automáticamente.
• ✅ Variantes: Éxito, Error, Advertencia e Información.
• 📱 Responsive: Se adapta a móviles y escritorio.

📦 Instalación

Instala la librería desde NPM:

npm install toast-modern

🚀 Uso Rápido

1. Importar el Componente

En tu componente principal (ej. app.component.ts), importa ToastComponent.

import { Component } from '@angular/core';
import { ToastComponent } from 'toast-modern'; // <--- Importar

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToastComponent], // <--- Agregar a imports
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {}

2. Agregar la Etiqueta en el HTML

Coloca la etiqueta <toast-modern-toast /> en tu plantilla (se recomienda al final).

<!-- app.component.html -->
<router-outlet></router-outlet>

<!-- Contenedor de las notificaciones -->
<toast-modern-toast />

3. Usar el Servicio

Inyecta ToastService y llama a los métodos para mostrar alertas.

import { Component, inject } from '@angular/core';
import { ToastService } from 'toast-modern'; // <--- Importar Service

export class UserComponent {
  // Inyectar el servicio
  private toastService = inject(ToastService);

  guardar() {
    // Lógica de guardado...
    this.toastService.success('¡Guardado correctamente!');
  }

  eliminar() {
    // Lógica de error...
    this.toastService.error('Hubo un problema al eliminar.');
  }
}

📚 API

Métodos del ToastService

| Método | Argumentos | Descripción | | :--- | :--- | :--- | | success() | message: string, duration?: number | Muestra un toast verde de éxito. | | error() | message: string, duration?: number | Muestra un toast rojo de error. | | warning() | message: string, duration?: number | Muestra un toast amarillo de advertencia. | | show() | message, type, duration | Método genérico para mostrar cualquier tipo. | | close() | - | Cierra manualmente el toast actual. |

Hecho con ❤️ para la comunidad de Angular.