Anuncio
El componente Anuncio es una barra de notificaciones flexible que se puede mostrar en la parte superior de tu página web. Es ideal para mostrar mensajes importantes, alertas o contenido promocional a tus usuarios.
Características
- Múltiples tipos: info, éxito, advertencia y error
- Diseño completamente responsivo
- Cierre automático después de un tiempo determinado
- Botón de cierre opcional
- Animaciones suaves
- Colores y contenido personalizables
- Empuja el contenido de la página hacia abajo cuando se muestra
Instalación
typescript
import { Announcement } from './ruta-al/anuncio';Uso básico
typescript
// Inicialización con configuración predeterminada
const anuncio = new Announcement({
tracker: tuInstanciaTracker,
título: '¡Nueva función!',
mensaje: 'Echa un vistazo a nuestra última actualización',
tipo: 'info',
mostrarAutomáticamente: true
});Opciones de configuración
| Opción | Tipo | Predeterminado | Descripción |
|---|---|---|---|
tracker | SystemTracker | Requerido | Instancia del tracker para análisis |
título | string | '' | Título del anuncio |
mensaje | string | '' | Contenido principal del mensaje |
tipo | `'info' | 'éxito' | 'advertencia' |
colorTema | string | '#3b82f6' | Color personalizado para anuncios de tipo 'info' |
enlaceUrl | string | 'https://rojastudio.xyz' | URL para el enlace opcional |
textoEnlace | string | 'Más información' | Texto para el enlace opcional |
mostrarAutomáticamente | boolean | true | Si mostrar el anuncio automáticamente |
duración | number | 0 | Ocultar automáticamente después de milisegundos (0 = no ocultar automáticamente) |
cerrable | boolean | true | Si mostrar el botón de cierre |
empujarContenido | boolean | true | Si empujar el contenido de la página hacia abajo |
Métodos
mostrar()
Muestra manualmente el anuncio.
typescript
anuncio.mostrar();ocultar()
Oculta manualmente el anuncio.
typescript
anuncio.ocultar();Ejemplos
Mensaje de éxito
typescript
new Announcement({
tracker: tuInstanciaTracker,
título: '¡Éxito!',
mensaje: 'Tus cambios han sido guardados.',
tipo: 'éxito',
duración: 5000 // Se oculta automáticamente después de 5 segundos
});Mensaje de error con enlace personalizado
typescript
new Announcement({
tracker: tuInstanciaTracker,
título: 'Error',
mensaje: 'Algo salió mal. Por favor, inténtalo de nuevo.',
tipo: 'error',
enlaceUrl: '/ayuda',
textoEnlace: 'Obtener ayuda',
cerrable: false // Obliga a los usuarios a reconocer el error
});Estilos
El componente incluye estilos predeterminados pero se pueden personalizar usando las siguientes clases CSS:
.pt-anuncio- Contenedor principal.pt-anuncio.visible- Cuando el anuncio es visible.pt-anuncio-interno- Contenedor de contenido interno.pt-anuncio-texto- Contenedor de texto.pt-anuncio-cerrar- Botón de cierre
Compatibilidad con navegadores
- Chrome (última versión)
- Firefox (última versión)
- Safari (última versión)
- Edge (última versión)
- IE11+ (con polyfills)