Salta ai contenuti
Starlight

Componenti

I componenti permettono di riutilizzare un elemento UI o altro ripetutamente. Degli esempi potrebbero essere delle sezioni di link o un video YouTube integrato. Starlight supporta l’utilizzo di questi nei file MDX e fornisce dei componenti per te già pronti.

Vedi di più sulla costruzione di componenti nella documentazione Astro.

Utilizzare un componente

Puoi usare un componente importandolo nel tuo file MDX e poi visualizzarlo come un tag JSX. Questi possono ricordare dei tag HTML ma iniziano con una maiuscola:

---
# src/content/docs/index.mdx
title: Benvenuto nella mia documentazione
---

import SomeComponent from '../../components/SomeComponent.astro';
import AnotherComponent from '../../components/AnotherComponent.astro';

<SomeComponent prop="something" />

<AnotherComponent>
	I componenti possono avere **contenuti interni**.
</AnotherComponent>

Siccome Starlight è integrato con Astro, puoi aggiungere componenti costruiti con qualsiasi UI framework supportato (React, Preact, Svelte, Vue, Solid, Lit, and Alpine). Vedi di più su come usare componenti in MDX nella documentazione Astro.

Componenti integrati

Starlight fornisce dei componenti per casi comuni in una documentazione. Questi sono disponibili nel pacchetto @astrojs/starlight/components.

Tabs

Puoi rappresentare contenuti con un’interfaccia a schede con i componenti <Tabs> e <TabItem>. Ogni <TabItem> deve avere un label per indicare la scheda corrispondente.

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

<Tabs>
	<TabItem label="Stelle">Sirius, Vega, Betelgeuse</TabItem>
	<TabItem label="Lune">Io, Europa, Ganymede</TabItem>
</Tabs>
Sirius, Vega, Betelgeuse

Card

Puoi rappresentare i contenuti in un riquadro che rispecchia il tema Starlight usando il componente <Card>. Racchiudi più card in <CardGrid> per visualizzarle fianco a fianco se c’è abbastanza spazio.

Una <Card> necessita di title e può avere eventualmente un attributo icon impostato ad una delle icone Starlight.

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

<Card title="Guarda qui">Contenuti interessanti da evidenziare.</Card>

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

Guarda qui

Contenuti interessanti da evidenziare.

Stelle

Sirius, Vega, Betelgeuse

Lune

Io, Europa, Ganymede

LinkCard

Utilizza il componente <LinkCard> per collegare in modo visibile pagine diverse.

Una <LinkCard> richiede un title e un attributo href. Facoltativamente puoi includere una breve description o altri attributi del collegamento come target.

Raggruppa più componenti <LinkCard> in <CardGrid> per visualizzare le schede una accanto all’altra quando c’è spazio sufficiente.

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

<LinkCard
	title="Customizing Starlight"
	description="Learn how to make your Starlight site your own with custom styles, fonts, and more."
	href="/guides/customization/"
/>

<CardGrid>
	<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
	<LinkCard title="Components" href="/guides/components/" />
</CardGrid>

Il codice precedente genera quanto segue nella pagina:

Customizing StarlightLearn how to make your Starlight site your own with custom styles, fonts, and more.
Authoring Markdown
Components

Icon

Starlight fornisce una serie di icone comuni che puoi visualizzare nei tuoi contenuti utilizzando il componente <Icon>.

Ogni <Icon> richiede un name e può facoltativamente includere un attributo label, size e color.

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

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

Il codice sopra genera quanto segue nella pagina:

All icons

Di seguito è riportato un elenco di tutte le icone disponibili con i nomi associati. Fare clic su un’icona per copiarne il codice componente.