Formularios

• Select Component: Control de selección avanzado que mejora el elemento select nativo con funcionalidades adicionales.
• Quantity Component: Control numérico interactivo para incrementar o decrementar valores fácilmente.

Contenido

• Accordions Component: Acordeones expandibles que permiten mostrar u ocultar contenido en secciones plegables.
• Show More Content: Permite mostrar gradualmente más contenido al hacer clic en un botón "Ver más".
• Zoom Image Component: Aplica efecto de zoom en imágenes mediante click o hover, con seguimiento del cursor.

💻 Instalación

Para utilizar estos componentes en tu proyecto, puedes:

Opción 1: Descargar componentes específicos

1. Navega al directorio del componente que necesitas en https://github.com/soyleninjs/easy-elements
2. Descarga los archivos index.js y index.css del componente
3. Incluye estos archivos en tu proyecto

Opción 2: Clonar el repositorio completo

git clone https://github.com/soyleninjs/easy-elements.git
cd easy-elements

🔧 Uso

Cada componente tiene su propia documentación detallada y ejemplos de uso. En general, para usar un componente:

1. Importa el JavaScript y CSS del componente en tu HTML:

<!-- Importar el componente -->
<link rel="stylesheet" href="ruta/al/componente/index.css">
<script src="ruta/al/componente/index.js"></script>

2. Utiliza el componente en tu HTML siguiendo la estructura documentada:

<!-- Ejemplo para Popup Component -->
<popup-component>
  <div class="popup-component-content">
    <h2>Título del Popup</h2>
    <p>Contenido del popup...</p>
  </div>
</popup-component>

3. Personaliza el componente según tus necesidades utilizando CSS y los atributos disponibles.

🎨 Personalización

Todos los componentes pueden personalizarse mediante:

• Variables CSS: Cada componente define variables CSS que pueden sobrescribirse
• Atributos personalizados: Configura el comportamiento mediante atributos HTML
• Eventos: Interactúa con los componentes mediante eventos JavaScript

Ejemplo de personalización con CSS:

/* Personalizar el Popup Component */
popup-component {
  --popup-background-color: rgba(0, 0, 0, 0.8);
  --popup-content-background: #ffffff;
  --popup-border-radius: 8px;
}

👥 Contribución

¡Las contribuciones son bienvenidas! Si deseas contribuir a este proyecto:

1. Haz un fork del repositorio soyleninjs/easy-elements
2. Crea una nueva rama (git checkout -b feature/nuevo-componente)
3. Realiza tus cambios
4. Haz commit de tus cambios (git commit -m 'Añade nuevo componente')
5. Haz push a la rama (git push origin feature/nuevo-componente)
6. Abre un Pull Request

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

Creado con ❤️ por @soyleninjs