Actualmente estoy migrando mi portafolio a Astro, un nuevo framework para crear sitios estáticos (si otro…), y para ello utilice un concepto llamado slots. A continuación, explicaré ¿Qué son los slots?
Los slots son espacios reservados dentro de un componente donde se puede insertar contenido HTML.
Construyendo nuestro primer slot
Primero, creamos un nuevo archivo de Astro dentro de la carpeta /src/layouts llamado PrimerSlot.astro.
Astro tiene una etiqueta especial para indicarle donde queremos colocar el contenido HTML desde otro componente.
<section>
<h1>Hola estoy en el componente padre.</h1>
<slot /> <!-- Aqui mostrará contenido html desde otro componente -->
</section>
Usando nuestro primer slot
Para utilizar el componente creado, debemos crear un nuevo archivo dentro de la carpeta /src/pages llamado PaginaUtilizandoElPrimerSlot.astro e importar nuestro componente padre PrimerSlot que acabamos de crear.
---
import PrimerSlot from "../layouts/PrimerSlot.astro";
---
<html lang="es">
<head>
<title>
Página utilizando el primer slot
</title>
</head>
<body>
<PrimerSlot />
<h1>Hola, aqui mostrare una lista :P </h1>
<ul>
<li>Soy una lista</li>
<li>usando slots</li>
<ul>
<PrimerSlot />
</body>
</html>
Más de un slots (Named Slots)
Astro también permite utilizar más un slot. Para lograrlo, debemos asignar un nombre a cada slot para poder identificarlos. Creamos un nuevo archivo de Astro dentro de la carpeta /src/layouts llamado MultiplesSlots.astro.
Crearemos un slot para el encabezado (header) y otro para el pie de página (footer) utilizando named slots.
<div class="container">
<header>
<slot name="header" />
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer" />
</footer>
</div>
Usando componente con múltiples slots
Debemos crear un nuevo archivo dentro de la carpeta /src/pages llamado PaginaConMultiplesSlots.astro e importar nuestro componente MultiplesSlots que acabamos de crear.
Para especificar el nombre del slot, debemos utilizar el atributo slot. Todos los demás serán insertados en el slot por default.
---
import MultiplesSlots from "../layouts/MultiplesSlots.astro";
---
<html lang="en">
<head>
<title>
Página con multiples slots
</title>
</head>
<body>
<MultiplesSlots />
<h1 slot="header">Hola, estoy usando el slot header.</h1>
<p>Hola, estoy usando el slot por default dentro de main.</p>
<p>Hola, yo tambien.</p>
<p slot="footer">Hola, estoy usando el slot footer.</p>
<MultiplesSlots />
</body>
</html>
Conclusión
La utilización de los slots nos permite tener componentes padre con una estructura definida y reservar áreas específicas para poder incorporar variaciones de contenido.
Referencias
Documentación Astro - Slots
Using-slots-to-build-layouts-in-astro - ElianCodes
Top comments (0)