Slots en componentes

⤎ Anterior Inicio ⤒Siguiente ⤏

Nos hemos dejado por el camino un fragmento que no es personalizable en nuestro componente Hero: la descripción en texto largo.

Ahora mismo es un texto dentro de una etiqueta <p> y no es configurable.

¿Podríamos pasarlo con un prop?

En informática todo es posible, pero siempre hay un camino más corto.

El fantástico mundo de los slots ¶

Entremos en el mundo de los slots (ranuras, en inglés) que están pensados precisamente para este caso.

Volvemos a Hero.astro y lo dejamos así:

/src/components/Hero.astro

---
interface Props {
  title: string;
  imageUrl: string;
  buttonText?: string;
  buttonLink?: string;
}
const { title, imageUrl, buttonText, buttonLink } = Astro.props;
---
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
  <div class="col-10 col-sm-8 col-lg-6">
    <img
      src={imageUrl}
      class="d-block mx-lg-auto img-fluid"
      alt="Flamante página de Astro"
      width="700"
      height="500"
      loading="lazy"
    />
  </div>
  <div class="col-lg-6">
    <h1 class="display-5 fw-bold lh-1 mb-3">{title}</h1>
    <slot />
    <div class="d-grid gap-2 d-md-flex justify-content-md-start">
      <a href={buttonLink} class="btn btn-primary btn-lg px-4 me-md-2"
        >{buttonText}</a
      >
    </div>
  </div>
</div>

🔍 slot es un componente propio de Astro que nos va a permitir pasar desde el padre al componente hijo etiquetas de HTML.

Fíjate ahora en el cambio en index.astro

/src/pages/index.astro

<Hero 
      title="Mi primera Astro web"
      imageUrl="https://placekitten.com/g/500/400"
      buttonText="Leer más"
      buttonLink="/about"
>
  <p class="lead">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
		eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
		minim veniam, quis nostrud exercitation ullamco laboris nisi ut
		aliquip ex ea commodo consequat.
	</p>
</Hero>

👀 Ves como abrimos y cerramos <Hero> y encerrado entre las etiquetas está el HTML de la descripción. El componente trasladará ese <p> al lugar donde está definido <slot> en el componente

¡Funciona igual que el HTML!

🔍 Los componentes de Astro permiten más de un slot por componente, pero no lo veremos en el bootcamp.

Slot por defecto ¶

Siempre es bueno considerar valores por defecto si así lo creemos conveniente. Seguramente nos ahorre escribir menos código en la siguiente iteración.

⚡️ Recuerda que tenemos importado Hero.astro tanto en index.astro como en about.astro.

Modificamos el componente de nuevo:

/src/components/Hero.astro

---
interface Props {
  title: string;
  imageUrl: string;
  buttonText?: string;
  buttonLink?: string;
}
const { title, imageUrl, buttonText, buttonLink } = Astro.props;
---
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
  <div class="col-10 col-sm-8 col-lg-6">
    <img
      src={imageUrl}
      class="d-block mx-lg-auto img-fluid"
      alt="Flamante página de Astro"
      width="700"
      height="500"
      loading="lazy"
    />
  </div>
  <div class="col-lg-6">
    <h1 class="display-5 fw-bold lh-1 mb-3">{title}</h1>
    <slot>
      <p class="lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
      </p>
    </slot>
    <div class="d-grid gap-2 d-md-flex justify-content-md-start">
      <a href={buttonLink} class="btn btn-primary btn-lg px-4 me-md-2"
        >{buttonText}</a
      >
    </div>
  </div>
</div>

👀 Usamos el mismo procedimiento que antes pero dentro del slot. Ese será ahora el valor por defecto.

Vamos a index.astro y lo simplificamos de esta manera.

/src/pages/index.astro

---
import Hero from "../components/Hero.astro";
import SiteLayout from "../layouts/SiteLayout.astro";
---
<SiteLayout>
  <div class="container col-xxl-8 px-4 py-5">
    <Hero
      title="Mi primera Astro web"
      imageUrl="https://placekitten.com/g/500/400"
      buttonText="Leer más"
      buttonLink="/about"
    >
    </Hero>
  </div>
</SiteLayout>

💦 Comprueba que todo funciona y haz cambios en about.astro para que veas como poder sobreescribir el valor por defecto del <slot>

💪 ¡Los tienes controlados los componentes!

⚡️ Pon a prueba lo que has aprendido

1. ¿Qué es un 'slot' en Astro?

2. ¿Cómo se puede establecer un valor por defecto para un 'slot' en Astro?

3. ¿Cómo se pasa contenido a un 'slot' en un componente Astro?