No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

1 D铆as
22 Hrs
41 Min
56 Seg

Plantillas en Astro

12/25
Recursos

Aportes 6

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Slots

El elemento <slot /> es un espacio reservado para contenido HTML externo, permiti茅ndote inyectar (o ingresar en la 鈥渞anura鈥) elementos hijos provenientes de otros archivos en el maquetado de tu componente.
Por defecto, todos los elementos hijos que le sean enviados a un componente ser谩n renderizados en su <slot />.

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';

const { titulo } = Astro.props
---
<div id="content-wrapper">
  <Header />
  <Logo />
  <h1>{titulo}</h1>
  <slot />  <!-- aqu铆 van los hijos -->
  <Footer />
</div>

馃憖 OJO:

Los slots son diferentes a las props, que son atributos enviados a un componente Astro y disponibles para utilizar con Astro.props. Los slots renderizan elementos HTML hijos donde se lo indique.

Oscar lo menciona al final del video: A veces se queda algo pegado en la consola y es mejor reiniciarla para ver los cambios reflejados del Proyecto. Me sucedi贸 en esta y en la clase anterior 馃槄

Plantillas en Astro

鈩癸笍 Definici贸n
En Atomic Design, las plantillas son una organizaci贸n que posee una definici贸n de contenido basado en el recurso (ya sea por SEO o por estructura).

.
Las plantillas consisten, principalmente en grupos unidos para formar una narrativa de alg煤n producto web. A este nivel, comenzamos a ver la definici贸n formal de dise帽o seg煤n la interfaz de usuario.
.
Las plantillas son muy concretas y brindan contexto a todas las partes relacionadas o alusivas al contenido en curso.
.

Layouts Astro

Los layouts en Astro, son componentes en el subdirectorio ./src/layouts/ de que se utilizan para proporcionar una estructura de interfaz de usuario reutilizable, como una plantilla de p谩gina.
.

鉁 Concepto clave
Convencionalmente, usamos el t茅rmino Layout para los componentes de Astro que proporcionan elementos comunes de la interfaz de usuario compartidos entre p谩ginas como encabezados, barras de navegaci贸n y pies de p谩gina.

.
Un layout, generalmete proporciona:

  • Una plantilla de p谩gina en HTML
  • Un componente enriquecido procesada antes que se disponga la p谩gina

.
Un componente de dise帽o Astro t铆pico proporciona p谩ginas Astro, Markdown o MDX con:
.
src/layouts/MySiteLayout.astro

---
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <h1>{title}</h1>
    <article>
      <slot /> <!-- your content is injected here -->
    </article>
    <Footer />
  </body>
</html>

鉁 Concepto clave
Astro posee por default un layout, en cuanto agreguemos una, ser谩 remplazada y deberemos declararla por p谩gina seg煤n sea el caso.

.

Desarrollo de layouts

Generalmente, los layouts son distribuciones que se discuten y desarrollan seg煤n las necesidades del producto, ya que, particularmente, facilitar谩 el desarrollo de las posibles historias de usuario o requerimientos.
.
Supongamos el caso donde tenemos una aplicaci贸n m贸vil con los siguientes wireframes, donde tendr铆amos que adaptar 1 layout para 3 vistas diferentes:
.

en tailwind no existe la clase 鈥渇lex-block鈥 asi que no se exactamente que clase quiso colocar ahi

![](https://static.platzi.com/media/user_upload/image-b308defe-4cd9-4ae4-8c98-d2bdf2cb348c.jpg) tengo todo igual que como lo dice pero no me refleja los cambios de los estilos... ya mate el proceso y lo volvi a levantar pero no mr modifica nada
No olvidar reiniciar el proceso principal si los resultados no se visualizan en el browser