Lo que aprenderás

En esta clase donde trabajaremos en la sección de "Lo que aprenderás". Esta sección incluye un bloque con borde, dos columnas y la funcionalidad de "ver más" que ya hemos implementado en clases anteriores. ¡Vamos a ello!

1. Estructura Inicial

Creación del Archivo

Creamos un archivo llamado aprenderas.php.

Dentro del archivo, definimos un contenedor principal con un borde:

<div class="border border-gray-300 p-6">
    <h2 class="text-xl font-bold mb-4">Lo que aprenderás</h2>
</div>

Añadimos un contenedor para las columnas:

<div class="grid grid-cols-2 gap-4">
    <!-- Aquí irán los elementos -->
</div>

2. Estructura de los Elementos

Diseño de un Ítem

Cada ítem incluye un ícono y texto:

<div class="flex items-center gap-2">
    <svg class="text-green-500 w-5 h-5">...</svg>
    <span class="text-sm">Cómo evaluar proyectos</span>
</div>

Añadimos la clase flex-none al ícono para evitar que se redimensione:
```
<svg class="flex-none text-green-500 w-5 h-5">...</svg>
```

3. Generación Dinámica con PHP

Lista Dinámica

Creamos una lista de elementos:

<?php
$aprenderas = [
    "Cómo evaluar proyectos",
    "Desarrollar habilidades clave",
    "Colaborar con equipos remotos",
    "Usar herramientas modernas"
];
?>

Iteramos sobre la lista para generar los ítems dinámicamente:

<?php foreach ($aprenderas as $elemento): ?>
    <div class="flex items-center gap-2">
        <svg class="flex-none text-green-500 w-5 h-5">...</svg>
        <span class="text-sm"><?php echo $elemento; ?></span>
    </div>
<?php endforeach; ?>

4. Funcionalidad "Ver más"

Implementación con Alpine.js

Añadimos el atributo x-data al contenedor principal:

<div x-data="{ expanded: false }" class="relative">

Configuramos la funcionalidad de "ver más":

<div x-show="expanded" class="grid grid-cols-2 gap-4">
    <!-- Ítems dinámicos -->
</div>
<div x-show="!expanded" class="grid grid-cols-2 gap-4 line-clamp-3">
    <!-- Ítems dinámicos limitados -->
</div>

Añadimos un botón para alternar el estado:

<button @click="expanded = !expanded" class="text-blue-500 mt-4">
    <span x-show="!expanded">Ver más</span>
    <span x-show="expanded">Ver menos</span>
</button>

Ajustamos el contenedor relativo para manejar la transición:

<div class="relative">
    <div class="absolute bottom-0 h-12 bg-gradient-to-t from-white to-transparent w-full"></div>
</div>

5. Ajustes Finales

Estilos y Espaciado

Añadimos un margen inferior al contenedor principal:
```
<div class="mb-8">
    
</div>
```
Ajustamos los tamaños de texto y espacios:
- Títulos: text-xl font-bold.
- Espaciado entre elementos: gap-4.
- Padding interno: p-6.

Verificación Visual

Comprobamos que los ítems se alineen correctamente y que el botón "ver más" funcione como se espera. Si es necesario, ajustamos los tamaños y colores para mayor consistencia visual.

¡Obtén acceso a todos los cursos!