Aller au contenu

Référence des composants intégrés

Astro inclut plusieurs composants intégrés que vous pouvez utiliser dans vos projets. Tous les composants intégrés sont disponibles dans les fichiers .astro et peuvent nécessiter une instruction d’importation.

Vous pouvez référencer les Props de ces composants à l’aide de l’utilitaire ComponentProps.

---
import { Code } from 'astro:components';
---
<!-- Ajouter la coloration syntaxique à du code JavaScript. -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- Facultatif : Personnaliser votre thème. -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- Facultatif : Activer le retour à la ligne. -->
<Code code={`const foo = 'bar';`} lang="js" wrap />
<!-- Facultatif : Générer du code en ligne. -->
<p>
<Code code={`const foo = 'bar';`} lang="js" inline />
sera généré en ligne.
</p>
<!-- Facultatif : defaultColor -->
<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />

Ce composant fournit une coloration syntaxique pour les blocs de code au moment de la construction (aucun JavaScript côté client n’est inclus). Le composant est alimenté en interne par Shiki et prend en charge tous les thèmes et langues populaires. De plus, vous pouvez ajouter vos thèmes, langues, transformateurs et couleurs par défaut personnalisés en les transmettant respectivement aux attributs theme, lang, transformers et defaultColor.

Ajouté à la version : astro@4.11.0

Les Transformateurs de Shiki peuvent éventuellement être appliqués au code en les transmettant via la propriété transformers sous forme de tableau. Depuis Astro v4.14.0, vous pouvez également fournir une chaîne de caractères à l’attribut meta de Shiki pour transmettre des options aux transformateurs.

Notez que transformers n’applique que les classes et vous devez fournir vos propres règles CSS pour cibler les éléments de votre bloc de code.

src/pages/index.astro
---
import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code
code={code}
lang="js"
transformers={[transformerMetaHighlight()]}
meta="{1,3}"
/>
<style is:global>
pre.has-focused .line:not(.focused) {
filter: blur(1px);
}
</style>

Un composant utilisé avec les directives set:* pour restituer le contenu HTML sans aucun élément d’habillage supplémentaire :

src/components/SetHtml.astro
---
const htmlString = '<p>Contenu HTML brut</p>';
---
<Fragment set:html={htmlString} />

En savoir plus sur l’utilisation de fragments dans la syntaxe Astro.

Pour utiliser le composant de coloration syntaxique Prism, installez d’abord le package @astrojs/prism :

Fenêtre de terminal
npm install @astrojs/prism
---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />

Ce composant fournit une coloration syntaxique spécifique au langage pour les blocs de code en appliquant les classes CSS de Prism. Notez que vous devez fournir une feuille de style CSS Prism (ou apporter la vôtre) pour que la coloration syntaxique apparaisse ! Consultez la section Configuration de Prism pour plus de détails.

Consultez la liste des langues supportées par Prism où vous pouvez trouver l’alias correspondant à une langue. Et vous pouvez également afficher vos blocs de code Astro avec lang="astro" !

src/components/MyComponent.astro
---
// importation du composant Image et de l'image
import { Image } from 'astro:assets';
import myImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
---
<!-- `alt` est obligatoire sur le composant Image -->
<Image src={myImage} alt="Une description de mon image." />
<!-- Sortie -->
<!-- L'image est optimisée, les attributs appropriés sont appliqués -->
<img
src="/_astro/mon_image.hash.webp"
width="1600"
height="900"
decoding="async"
loading="lazy"
alt="Une description de mon image."
/>
  • src (requis)
  • alt (requis)
  • width et height (requis pour les images dans public/ et celles distantes)
  • format
  • quality
  • densities
  • widths

En plus des propriétés ci-dessus, le composant <Image /> accepte toutes les propriétés acceptées par la balise HTML <img>.

Pour en savoir plus, consultez le Guide des images.

Ajouté à la version : astro@3.3.0

Utilisez le composant Astro intégré <Picture /> pour afficher une image réactive avec plusieurs formats et/ou tailles.

src/pages/index.astro
---
import { Picture } from 'astro:assets';
import monImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
---
<!-- `alt` est obligatoire sur le composant Image -->
<Picture src={monImage} formats={['avif', 'webp']} alt="Une description de mon image." />
<!-- Sortie -->
<picture>
<source srcset="/_astro/mon_image.hash.avif" type="image/avif" />
<source srcset="/_astro/mon_image.hash.webp" type="image/webp" />
<img
src="/_astro/mon_image.hash.png"
width="1600"
height="900"
decoding="async"
loading="lazy"
alt="Une description de mon image."
/>
</picture>

Pour en savoir plus, consultez le Guide des images.

<Picture /> accepte toutes les propriétés du composant <Image /> en plus des suivantes :

Un tableau de formats d’image à utiliser pour les balises <source>. Par défaut, il est défini sur ['webp'].

Format à utiliser comme valeur de repli pour la balise <img>. La valeur par défaut est .png pour les images statiques, .gif pour les images animées et .svg pour les fichiers SVG.

Un objet d’attributs à ajouter à la balise <picture>. Utilisez cette propriété pour appliquer des attributs à l’élément externe <picture> lui-même. Les attributs appliqués directement au composant <Picture /> s’appliqueront à l’élément interne <img>, à l’exception de ceux utilisés pour la transformation d’image.

Un composant générique utilisé pour restituer le contenu d’une entrée de collection de contenu.

Tout d’abord, interrogez une ou plusieurs entrées en utilisant getCollection() ou getEntry(). Ensuite, la fonction entry.render() peut renvoyer le composant <Content /> à utiliser dans un modèle de fichier .astro.

src/pages/render-example.astro
---
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'article-1');
const { Content } = await entry.render();
---
<p>Publié le : {entry.data.published.toDateString()}</p>
<Content />

Ajouté à la version : astro@2.9.0

Choisissez d’utiliser les transitions de vue sur des pages individuelles en important et en ajoutant le composant de routage <ViewTransitions /> dans la balise <head> sur chaque page souhaitée.

src/pages/index.astro
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="fr">
<head>
<title>Ma page d'accueil</title>
<ViewTransitions />
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
</body>
</html>

Découvrez comment contrôler le routeur et ajouter des directives de transition aux éléments et composants de la page.

---
import { Debug } from 'astro:components';
const serverObject = {
a: 0,
b: "string",
c: {
nested: "object"
}
}
---
<Debug {serverObject} />

Ce composant fournit un moyen d’inspecter les valeurs côté client, sans aucun JavaScript.

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté