En esta clase, hemos comenzado a construir la sección de pestañas para el curso, estableciendo tanto la estructura visual como el funcionamiento básico para alternar entre pestañas de contenido.

Objetivos de la Clase

• Diseñar una sección de pestañas estilizada y funcional.
• Implementar un sistema dinámico para gestionar las pestañas con Alpine.js.
• Preparar la base para futuras clases que desarrollarán cada contenido de las pestañas.

Resumen del Proceso

1. Estructura de las Pestañas

• Creamos un archivo taps.php para esta sección.
• Establecimos un contenedor principal con clases como container y my-24 para el espaciado vertical.
• Dividimos la sección en dos partes:
  • Menú de navegación: Contiene los botones de las pestañas.
  • Área de contenido: Donde se mostrará el contenido correspondiente a cada pestaña activa.

2. Diseño del Menú de Navegación

• Utilizamos flex con gap-6 para organizar las pestañas horizontalmente.

• Cada pestaña tiene estilos como:

  • Por defecto: text-gray-600 y border-b-2 border-transparent.
  • Activa: text-primary y border-primary.

• Se implementaron cambios de color al pasar el cursor (hover:text-primary).

3. Sistema Dinámico con Alpine.js

• Configuramos Alpine.js con una variable activeTap para gestionar el estado de las pestañas.
• Añadimos directivas x-show para mostrar u ocultar contenido dependiendo de la pestaña activa.
• Establecimos eventos @click en las pestañas para cambiar el valor de activeTap.

4. Generación Dinámica con PHP

• Para evitar duplicación de código:
  • Creamos un array de pestañas con sus títulos y contenido.
  • Utilizamos un bucle en PHP para generar las pestañas y su contenido dinámicamente.
  • El índice del array se utilizó para identificar cada pestaña.

5. Estilización Adicional

• Añadimos un espaciado uniforme con py-3 para mantener un diseño limpio.
• Aseguramos que las pestañas estuvieran alineadas y que el diseño fuera responsivo.
• Implementamos clases reutilizables para gestionar el estilo de pestañas activas e inactivas.

Puntos Destacados

• Reutilización de Código: La combinación de Alpine.js y PHP hace que las pestañas sean escalables y fáciles de modificar.
• Interactividad Fluida: Las transiciones entre pestañas son suaves y dinámicas, mejorando la experiencia del usuario.
• Base Preparada: Este diseño modular facilita la implementación de contenido en las próximas clases.