Ejemplos de Alpine.js

Demonstración de componentes interactivos con Alpine.js

Alpine.js es un framework JavaScript ligero y moderno para crear componentes interactivos del lado del cliente. Esta página demuestra varios ejemplos prácticos de cómo usar Alpine.js con el sistema SysVector.

Contador Simple

Ejemplo básico de un contador con botones para incrementar, decrementar y resetear.

Pestañas (Tabs)

Componente de pestañas para alternar entre diferentes contenidos.

Primera Pestaña

Este es el contenido de la primera pestaña. Puedes colocar cualquier tipo de contenido aquí.

Segunda Pestaña

Este es el contenido de la segunda pestaña. Las pestañas son útiles para organizar información relacionada.

Tercera Pestaña

Este es el contenido de la tercera pestaña. Alpine.js hace que la creación de componentes interactivos sea muy simple.

Acordeón

Componente de acordeón que puede ser expandido y colapsado.

Alpine.js es un framework JavaScript robusto y mínimo para agregar comportamiento interactivo a tu HTML. Piensa en él como Tailwind para JavaScript.

Alpine.js puede ser fácilmente integrado con SysVector. Solo incluye el script en el layout y usa los atributos x-data, x-show, x-if, etc., en tus plantillas Twig.

Alpine.js es ligero (solo 15KB), fácil de aprender, no requiere paso de compilación y funciona perfectamente con cualquier framework backend.

Modal

Ventana modal que puede ser abierta y cerrada.

Título del Modal
Este es un ejemplo de modal creado con Alpine.js. Los modales son útiles para mostrar información importante o formularios sin salir de la página actual.

Lista de Tareas

Aplicación simple de lista de tareas con adición, eliminación y marcado de completado.

Completadas: | Total:

Formulario con Validación

Ejemplo de formulario con validación en tiempo real usando Alpine.js.

Alternador de Tema

Ejemplo de cómo alternar entre temas claro y oscuro.

Tema atual:

Desplegable

Menú desplegable que puede ser abierto y cerrado.

Opción 1 Opción 2 Opción 3

Búsqueda y Filtro

Ejemplo de búsqueda en tiempo real con filtrado de lista.

No se encontraron resultados

Galería de Imágenes

Galería de imágenes con zoom y navegación.

Barra de Progreso

Barra de progreso animada que puede ser controlada.

Tooltip

Ejemplo de tooltips que aparecen al pasar el mouse.

Pasa el mouse aquí

Área de Transferencia

Copiar y pegar texto usando el área de transferencia.

Contenido del Portapapeles
¡Copiado!

Selector de Color

Selector de color con vista previa en tiempo real.

Valor HEX

Valor RGB

Selector de Fecha

Selector de fecha interactivo con calendario.

Sistema de Calificación

Sistema de calificación con estrellas interactivas.

Califica esto

Calificación actual:

Carrusel

Carrusel de imágenes con navegación automática y manual.

Sistema de Notificaciones

Sistema de notificaciones con diferentes tipos y acciones.

Integración con el Sistema de Traducción

Alpine.js funciona perfectamente con el sistema de traducción de SysVector. Puedes usar textos traducidos en tus componentes JavaScript de varias maneras:

Método 1: Pasar variables de Twig

Puedes pasar variables traducidas de Twig a Alpine.js usando el atributo x-data.
Método 2: Usar atributos data-*

Almacena textos traducidos en atributos data-* y accede a ellos vía Alpine.js.
Método 3: API de Traducción

Crea endpoints API para obtener traducciones dinámicamente cuando sea necesario.

fetch('/api/translations')
    .then(res => res.json())
    .then(data => {
        // Usar traduções no Alpine.js
    });

Buenas Prácticas

Aquí hay algunas buenas prácticas al usar Alpine.js con SysVector:

  • Mantén la lógica simple y enfocada en la UI
  • Usa componentes reutilizables para funcionalidades comunes
  • Separa preocupaciones: Alpine.js para interactividad, PHP para lógica de negocio
  • Usa transiciones CSS para animaciones suaves
  • Prueba tus componentes en diferentes navegadores