@lit-roa/avisos

Avisos flotantes (toasts): se ocultan solos, se pausan con el cursor encima, pueden llevar un botón de acción y se anuncian a lectores de pantalla.

npm install @lit-roa/avisos

import { mostrarAviso } from '@lit-roa/avisos';

mostrarAviso('Guardado');
mostrarAviso({
  tipo: 'exito',
  titulo: 'Agregado al carrito',
  mensaje: 'Café de Chiapas 250 g',
  accion: 'Ver carrito',
  id: 'carrito',
});

document.addEventListener('accion-aviso', (e) => {
  if (e.detail.id === 'carrito') abrirCarrito();
});

mostrarAviso() usa el primer <lr-avisos> de la página o crea uno. Para cambiar la posición, pon el contenedor tú: <lr-avisos posicion="arriba-centro"></lr-avisos>. Devuelve una función para quitar el aviso antes de tiempo.

Opciones del aviso

| Opción | Tipo | Por omisión | | --- | --- | --- | | mensaje | string | — | | titulo | string | — | | tipo | info · exito · aviso · error | info | | duracion | number (ms; 0 = no se oculta solo) | 4000 (6000 con acción) | | accion | string (texto del botón) | — | | id | string (viaja en accion-aviso) | — |

<lr-avisos>

| Atributo | Tipo | Por omisión | | --- | --- | --- | | posicion | arriba- / abajo- + izquierda · centro · derecha | abajo-derecha | | maximo | number (avisos visibles a la vez) | 4 |

Métodos mostrar(opciones) y limpiar(). Evento accion-aviso con { id, accion }.

Estilos: --lr-aviso-fondo, --lr-aviso-texto, --lr-aviso-accion, --lr-avisos-capa (z-index) y ::part(aviso).

Desarrollo

npm run dev -w @lit-roa/avisos