8000 GitHub - Mrbanano/FlashyJS: Flashy.js es una librería ligera y moderna para mostrar notificaciones en la web, diseñada para ser fácil de usar, altamente personalizable y compatible con múltiples entornos (global, ES Module y CommonJS). Permite crear notificaciones estilizadas con animaciones fluidas, temas, iconos y opciones de configuración flexibles.
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Flashy.js es una librería ligera y moderna para mostrar notificaciones en la web, diseñada para ser fácil de usar, altamente personalizable y compatible con múltiples entornos (global, ES Module y CommonJS). Permite crear notificaciones estilizadas con animaciones fluidas, temas, iconos y opciones de configuración flexibles.

Notifications You must be signed in to change notification settings

Mrbanano/FlashyJS

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

Flashy.js 🚀

Una librería de notificaciones elegante y personalizable para JavaScript.

Características ✨

  • 🎨 Múltiples tipos de notificaciones (success, error, warning, info, default)
  • 🎯 6 posiciones diferentes (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
  • 🎭 4 animaciones diferentes (slide, fade, bounce, zoom)
  • 🌓 Soporte para temas claro y oscuro
  • 📱 Diseño responsive
  • ⏱️ Barra de progreso opcional
  • 🔄 Personalización completa
  • 🎯 Callbacks para interacción
  • 🚀 Sin dependencias

Instalación 📦

CDN

<script src="https://cdn.jsdelivr.net/gh/pablotheblink/FlashyJS/flashy.js"></script>

NPM

npm install flashy.js

Yarn

yarn add flashy.js

Uso Básico 🚀

Script Global

<script src="flashy.js"></script>
<script>
  window.flashy("¡Hola Mundo!");
</script>

ES Modules

import flashy from "flashy.js";

flashy("¡Hola Mundo!");

CommonJS

const flashy = require("flashy.js");

flashy("¡Hola Mundo!");

Tipos de Notificaciones 🎨

// Notificación básica
flashy("Mensaje básico");

// Notificación de éxito
flashy.success("¡Operación exitosa!");

// Notificación de error
flashy.error("¡Algo salió mal!");

// Notificación de advertencia
flashy.warning("¡Ten cuidado!");

// Notificación informativa
flashy.info("Información importante");

Opciones de Configuración ⚙️

flashy("Mensaje", {
  type: "success", // 'success' | 'error' | 'warning' | 'info' | 'default'
  position: "top-right", // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
  duration: 4000, // duración en milisegundos (0 para infinito)
  closable: true, // mostrar botón de cerrar
  animation: "slide", // 'slide' | 'fade' | 'bounce' | 'zoom'
  theme: "light", // 'light' | 'dark'
  icon: "🎉", // icono personalizado
  onClick: () => {}, // callback al hacer clic
  onClose: () => {}, // callback
7475
 al cerrar
});

Configuración Global 🌍

// Establecer opciones por defecto
flashy.setDefaults({
  duration: 5000,
  position: "bottom-right",
  theme: "dark",
});

// Obtener opciones actuales
const options = flashy.getOptions();

Métodos Adicionales 🛠️

// Cerrar todas las notificaciones
flashy.closeAll();

// Destruir la instancia y limpiar el DOM
flashy.destroy();

Personalización de Estilos 🎨

La librería incluye estilos predeterminados, pero puedes sobrescribirlos usando CSS:

.flashy-notification {
  /* Tus estilos personalizados */
}

Soporte Móvil 📱

Las notificaciones son completamente responsivas y se adaptan automáticamente a dispositivos móviles.

Licencia 📄

MIT License - Ver el archivo LICENSE para más detalles.

Autor 👨‍💻

Pablo Martínez

Versión 📌

1.0.1

About

Flashy.js es una librería ligera y moderna para mostrar notificaciones en la web, diseñada para ser fácil de usar, altamente personalizable y compatible con múltiples entornos (global, ES Module y CommonJS). Permite crear notificaciones estilizadas con animaciones fluidas, temas, iconos y opciones de configuración flexibles.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 74.1%
  • JavaScript 25.9%
0