Componentes

Los componentes te permiten reutilizar fácilmente una parte de la interfaz de usuario o un estilo de manera consistente. Ejemplos podrían incluir una tarjeta de enlace o un incrustado de YouTube. Starlight admite el uso de componentes en archivos MDX y proporciona algunos componentes comunes para que los utilices.

Aprende más sobre la construcción de componentes en los docs de Astro.

Usando un componente

Puedes utilizar un componente importándolo en tu archivo MDX y luego renderizándolo como una etiqueta JSX. Estas etiquetas se ven como etiquetas HTML, pero comienzan con una letra mayúscula que coincide con el nombre en tu declaración de import:

---
# src/content/docs/index.mdx
title: Bienvenido a mis docs
---

import UnComponente from '../../componentes/UnComponente.astro';
import OtroComponente from '../../componentes/OtroComponente.astro';

<UnComponente prop="algo" />

<OtroComponente>
	Los componentes también pueden contener **contenido anidado**.
</OtroComponente>

Debido a que Starlight está impulsado por Astro, puedes agregar soporte para componentes construidos con cualquier framework UI compatible (React, Preact, Svelte, Vue, Solid, Lit y Alpine) en tus archivos MDX.

Compatibilidad con los estilos de Starlight

Starlight aplica estilos predeterminados a tu contenido de Markdown, por ejemplo, agregando márgenes entre elementos. Si estos estilos entran en conflicto con la apariencia de tu componente, establece la clase not-content en tu componente para desactivarlos.

---
// src/components/Ejemplo.astro
---

<div class="not-content">
	<p>
		No se ve afectado por los estilos predeterminados de contenido de Starlight.
	</p>
</div>

Compatibilidad con los estilos de Starlight

Starlight aplica estilos predeterminados a tu contenido en Markdown, por ejemplo, añadiendo margen entre elementos. Si estos estilos entran en conflicto con la apariencia de tu componente, establece la clase not-content en tu componente para deshabilitarlos.

---
// src/components/Ejemplo.astro
---

<div class="not-content">
	<p>
		No se ve afectado por el estilo de contenido predeterminado de Starlight.
	</p>
</div>

Componentes integrados

Starlight proporciona algunos componentes integrados para casos de uso comunes en la documentación. Estos componentes están disponibles en el paquete @astrojs/starlight/components.

Pestañas

Puedes mostrar una interfaz con pestañas utilizando los componentes <Tabs> y <TabItem>. Cada <TabItem> debe tener una label que se mostrará a los usuarios.

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
	<TabItem label="Estrellas">Sirius, Vega, Betelgeuse</TabItem>
	<TabItem label="Lunas">Io, Europa, Ganymede</TabItem>
</Tabs>

El código anterior genera las siguientes pestañas en la página:

• Estrellas
• Lunas

Sirius, Vega, Betelgeuse

Tarjetas

Puedes mostrar contenido en una caja que coincida con los estilos de Starlight utilizando el componente <Card>. Envuelve varias tarjetas en el componente <CardGrid> para mostrar las tarjetas una al lado de la otra cuando hay suficiente espacio.

El componente <Card> requiere un title y opcionalmente puede incluir un atributo icon establecido con el nombre de uno de los iconos integrados de Starlight.

import { Card, CardGrid } from '@astrojs/starlight/components';

<Card title="¡Echa un vistazo a esto!">
	Contenido interesante que quieres resaltar.
</Card>

<CardGrid>
	<Card title="Estrellas" icon="star">
		Sirius, Vega, Betelgeuse
	</Card>
	<Card title="Lunas" icon="moon">
		Io, Europa, Ganymede
	</Card>
</CardGrid>

El código anterior genera lo siguiente en la página:

¡Echa un vistazo a esto!

Contenido interesante que quieres resaltar.

Tarjetas de enlace

Usa el componente <LinkCard> para vincular de forma prominente a diferentes páginas.

Un <LinkCard> requiere un title y un atributo href. Opcionalmente puedes incluir una breve description u otros atributos de enlace como target.

Agrupa varios componentes <LinkCard> en <CardGrid> para mostrar las tarjetas una al lado de la otra cuando hay suficiente espacio.

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<LinkCard
	title="Personalizando Starlight"
	description="Aprende a hacer que tu sitio Starlight sea único con estilos personalizados, fuentes y más."
	href="/es/guides/customization/"
/>

<CardGrid>
	<LinkCard
		title="Creación de contenido en Markdown"
		href="/es/guides/authoring-content/"
	/>
	<LinkCard title="Componentes" href="/es/guides/components/" />
</CardGrid>

El código anterior genera lo siguiente en la página:

Iconos

Starlight proporciona un conjunto de iconos comunes que puedes mostrar en tu contenido utilizando el componente <Icon>.

Cada <Icon> requiere un atributo name que se puede encontrar en la lista de todos los iconos, y opcionalmente puede incluir atributos como label, size y color.

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />

El código anterior genera lo siguiente en la página:

Todos los iconos

A continuación se muestra una lista de todos los iconos disponibles con sus nombres asociados. Haz clic en un ícono para copiar el código del componente correspondiente.