Componentes dinámicos modernos para interfaces web interactivas
Características • Instalación • Inicio Rápido • Componentes • Documentación • Licencia
Dynamics Tips es una biblioteca JavaScript 100% vanilla (sin jQuery) que proporciona componentes dinámicos interactivos para aplicaciones web. Originalmente desarrollada como parte del ecosistema Bodystyle, ahora es una biblioteca independiente que será integrada en Bodystyle 6.0.0.
npm install dytips
<!-- CSS -->
<link rel="stylesheet" href="https://rawcdn.githack.com/FedeManzano/dynamics-tips/refs/heads/master/dist/css/dynamics.min.css">
<!-- JavaScript -->
<script src="https://rawcdn.githack.com/FedeManzano/dynamics-tips/refs/heads/master/dist/js/dynamics.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Dynamics Tips CSS -->
<link rel="stylesheet" href="path/to/dynamics.min.css">
<title>Mi Aplicación</title>
</head>
<body>
<!-- Tu contenido aquí -->
<!-- Dynamics Tips JS -->
<script src="path/to/dynamics.min.js"></script>
</body>
</html>
<!-- ToolTip simple -->
<button class="tips-ele" data-tips="¡Hola! Soy un tooltip" data-pos="top">
Pasa el cursor aquí
</button>
<!-- Comentario con más información -->
<button class="com-trigger"
data-info="<strong>Información importante:</strong> Este es un comentario con más detalles."
data-pos="right">
Ver información
</button>
<!-- Toast programático -->
<button onclick="DY.Toast({html: '¡Operación exitosa!', tiempo: 3000})">
Mostrar notificación
</button>
Los componentes se inicializan automáticamente. Para elementos dinámicos, usa la inicialización manual:
// Después de agregar elementos dinámicamente
DY.ToolTipsInit();
DY.CommentsInit();
DY.DropdownInit();
Información contextual que aparece al interactuar con un elemento.
<button class="tips-ele"
data-tips="Texto del tooltip"
data-pos="top|bottom|left|right"
data-evt="hover|click">
Elemento
</button>
Atributos:
| Atributo | Descripción | Valores | Default |
|---|---|---|---|
data-tips | Contenido del tooltip | HTML/Texto | - |
data-pos | Posición | top, bottom, left, right | bottom |
data-evt | Evento disparador | hover, click | hover |
Cuadros de información más grandes para contenido extenso.
<button class="com-trigger"
data-info="<p>Contenido del comentario</p>"
data-pos="right"
data-evt="hover">
Ver detalles
</button>
Atributos:
| Atributo | Descripción | Valores | Default |
|---|---|---|---|
data-info | Contenido del comentario | HTML/Texto | - |
data-pos | Posición | top, bottom, left, right | bottom |
data-evt | Evento disparador | hover, click | hover |
Listas desplegables vinculadas a elementos disparadores.
<!-- Disparador -->
<button class="dropdown-toggle"
data-target="#miLista"
data-pos="bottom"
data-evt="click">
Abrir menú
</button>
<!-- Lista -->
<div class="dropdown" id="miLista">
<ul>
<li><a href="#opcion1">Opción 1</a></li>
<li><a href="#opcion2">Opción 2</a></li>
<li><a href="#opcion3">Opción 3</a></li>
</ul>
</div>
Atributos:
| Atributo | Descripción | Valores | Default |
|---|---|---|---|
data-target | ID de la lista | Selector CSS | - |
data-pos | Posición | top, bottom, left, right | bottom |
data-evt | Evento disparador | hover, click | click |
data-color | Color de la flecha | Color CSS | #000 |
Notificaciones temporales que aparecen en pantalla.
DY.Toast({
html: '<p>¡Operación completada!</p>',
clases: ['mi-clase-custom'],
tiempo: 3000, // Duración en milisegundos
cerrar: true // Mostrar botón de cierre
});
Configuración:
| Propiedad | Tipo | Descripción | Default |
|---|---|---|---|
html | String | Contenido HTML | - |
clases | Array | Clases CSS adicionales | [] |
tiempo | Number | Duración en ms | 3000 |
cerrar | Boolean | Botón de cierre manual | false |
Crea tus propios componentes dinámicos.
DY.PerInit({
ori: 'mi-disparador', // Clase del elemento disparador
ele: 'mi-componente' // Clase del elemento dinámico
});
Clona el repositorio para acceder a los archivos fuente:
git clone https://github.com/FedeManzano/dynamics-tips
cd dynamics-tips
Edita las variables en los archivos SASS:
sass/_tips.scss)// Variables personalizables
$bg: rgba(0, 0, 0, 0.863);
$padding: 2px 5px 5px 5px;
$color: white;
$border-radius: 5px;
$tam-flecha: 5px;
sass/_comments.scss)$bg: rgb(255, 255, 255);
$border: 1px solid rgba(0, 0, 0, 0.295);
$border-radius: 5px;
$padding: 10px;
$color: rgb(48, 48, 48);
$fz: 14px;
# Instalar dependencias
npm install
# Compilar CSS
sass --style compressed sass/dynamics.scss dist/css/dynamics.min.css
Todas las funcionalidades están disponibles a través del objeto global DY:
// Toasts
DY.Toast(config)
// ToolTips
DY.ToolTipsInit() // Inicializar
DY.ToolTipsDestroy() // Destruir
// Comentarios
DY.CommentsInit()
DY.CommentsDestroy()
// Dropdown
DY.DropdownInit()
DY.DropdownDestroy()
// Personalizados
DY.PerInit(config)
DY.PerDestroy()
Para elementos agregados dinámicamente al DOM:
window.onload = () => {
setTimeout(() => {
// Inicializar después de agregar elementos dinámicos
DY.ToolTipsInit();
DY.CommentsInit();
DY.DropdownInit();
}, 100);
};
dynamics-tips/
├── dist/ # Archivos compilados
│ ├── css/
│ │ ├── dynamics.css
│ │ └── dynamics.min.css
│ └── js/
│ ├── dynamics.js
│ └── dynamics.min.js
├── sass/ # Archivos fuente SASS
│ ├── dynamics.scss
│ ├── _general.scss
│ ├── _tips.scss
│ ├── _comments.scss
│ ├── _dropdown.scss
│ └── _toast.scss
├── src/ # Código fuente JavaScript
│ ├── app.js
│ └── modulos/
│ ├── ToolTips.js
│ ├── ComentariosDinamicos.js
│ ├── DropDown.js
│ ├── Toast.js
│ ├── Personalizado.js
│ └── posicionamineto/
├── test/ # Archivos de prueba
├── logo/ # Recursos gráficos
├── package.json
├── webpack.config.js
└── README.md
# Clonar repositorio
git clone https://github.com/FedeManzano/dynamics-tips
cd dynamics-tips
# Instalar dependencias
npm install
# Compilar proyecto
npm run build
npm run build # Compilar JavaScript con Webpack
El proyecto cuenta con una suite completa de tests unitarios utilizando Jest y JSDOM.
# Ejecutar todos los tests
npm test
# Ejecutar tests con reporte de cobertura
npm test -- --coverage
| Métrica | Porcentaje | Estado |
|---|---|---|
| Statements | 94% | 🟢 Excelente |
| Branches | 69% | 🟡 Bueno |
| Functions | 91% | 🟢 Excelente |
| Lines | 95% | 🟢 Excelente |
Nota: La cobertura de ramas (branches) es menor debido a validaciones defensivas y casos extremos de posicionamiento que son difíciles de simular en JSDOM sin un entorno visual completo.
Las contribuciones son bienvenidas. Por favor:
git checkout -b feature/AmazingFeature)git commit -m 'Add: nueva característica')git push origin feature/AmazingFeature)¡Migración completa a Vanilla JavaScript!
destroy() en todos los módulossetInterval sin limpiar en Toast (ahora usa setTimeout)crearFlecha() en DropDownLa API pública permanece 100% compatible. No se requieren cambios en tu código.
Ver CHANGELOG.md y Releases para el historial completo.
¿Encontraste un bug? Abre un issue con:
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
MIT License - Copyright (c) 2020 Bodystyle
Se permite el uso, copia, modificación y distribución de este software
con fines comerciales y no comerciales, siempre que se incluya el aviso
de copyright y esta licencia.
Federico Manzano
Si este proyecto te resulta útil, considera darle una estrella ⭐ en GitHub.
Hecho con ❤️ por Federico Manzano
FAQs
Objetos dinámicos que se añaden debido a eventos del usuario.
The npm package dytips receives a total of 2 weekly downloads. As such, dytips popularity was classified as not popular.
We found that dytips demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.