Composants
Les composants Astro sont les blocs de base de tout projet Astro. Ce sont des composants avec seulement du HTML, sans exécution côté client. Vous pouvez repérer un composant Astro par son extension de fichier : .astro
.
Les composants Astro sont extrêmement flexibles. Souvent, un composant Astro contiendra une interface utilisateur réutilisable sur la page, comme un en-tête ou une carte de profil. À d’autres moments, un composant Astro peut contenir un petit extrait de code HTML, comme une collection de balises <meta>
courantes qui facilitent le travail avec le référencement. Les composants Astro peuvent même contenir la mise en page entière d’une page.
La chose la plus importante à savoir sur les composants Astro est qu’ils ne sont pas rendus côté client. Ils sont rendus en HTML soit au moment de la construction, soit à la demande en utilisant le rendu côté serveur (SSR). Vous pouvez inclure du code JavaScript à l’intérieur de votre composant, il sera entièrement supprimé de la page finale envoyée aux navigateurs de vos utilisateurs. Le résultat est un site plus rapide, sans aucune empreinte JavaScript ajoutée par défaut.
Lorsque votre composant Astro nécessite une interactivité côté client, vous pouvez ajouter des balises HTML <script>
standard ou des composants de Framework.
Structure du composant
Titre de la section Structure du composantUn composant Astro est composé de deux parties principales : le Script du composant et le Template du composant. Chacune de ces parties s’occupe de faire une tâche différente, mais ensemble, constituent un cadre facile d’utilisation et assez expressif pour gérer tout ce que vous voulez construire.
Le Script du composant
Titre de la section Le Script du composantAstro utilise des barres de code (---
) pour identifier le script du composant dans votre composant Astro. Si vous avez déjà écrit du Markdown avant, vous pourriez être déjà familier avec un concept similaire appelé frontmatter. Astro est directement inspiré de cela.
Vous pouvez utiliser le script du composant pour écrire du code JavaScript qui vous aidera à construire votre template. Cela peut inclure :
- Importer d’autres composants Astro
- Importer des composants de Framework, comme React
- Importer des données, comme un fichier JSON
- Récupérer le contenu d’une API ou une base de données
- Créer des variables que vous voulez référencer dans votre template
Les barres de code sont conçues pour garantir que le code JavaScript que vous écrivez à l’intérieur “ne puisse pas s’échapper”. Ce code n’apparaîtra pas dans le code final de votre page et ne sera pas visible à vos utilisateur. Vous pouvez écrire du code JavaScript coûteux (en terme de performance) ou sensible (comme un appel à votre base de données privée) sans vous soucier qu’il se retrouve dans le navigateur l’utilisateur.
Vous pouvez même écrire du TypeScript dans votre script de composant !
Le Template du composant
Titre de la section Le Template du composantEn dessous du script du composant se trouve le template du composant. Le template du composant détermine le HTML résultant de votre composant.
Si vous écrivez du HTML simple ici, votre composant affichera cet HTML dans toutes les pages où il est importé et utilisé.
De plus, la syntaxe du template du composant Astro prend également en charge les expressions JavaScript, les balises <style>
et <script>
Astro, les composants importés et les directives spéciales Astro. Les données et les valeurs définies (à la compilation) dans le script du composant peuvent être utilisées dans le template du composant pour produire du HTML dynamiquement créé.
Conception à base de composant
Titre de la section Conception à base de composantLes composants sont conçus pour être réutilisables et composables. Vous pouvez utiliser des composants à l’intérieur d’autres composants pour créer une interface utilisateur de plus en plus complexe. Par exemple, un composant Button
pourrait être utilisé pour créer un composant ButtonGroup
comme ceci :
Props de composant
Titre de la section Props de composantUn composant Astro peut définir et accepter des “props”. Ces props deviennent alors accessible dans le template du composant pour le rendu du HTML. Les props sont disponibles sur la variable globale Astro.props
entre les barres de codes.
Voici un exemple de composant qui reçoit un prop nommé greeting
et un prop nommé name
. Notez que les props à recevoir sont déstructurés de l’objet global Astro.props
.
Ce composant, lorsqu’il est importé et utilisé dans d’autres composants standards, Composants Layout ou pages Astro, peut recevoir ces props sous forme d’attributs :
Vous pouvez également définir le type de vos props avec TypeScript en créant une interface nommée Props
. Astro sélectionnera automatiquement l’interface Props
dans le Script du Composant et donnera des avertissements/erreurs de type. Ces props peuvent également recevoir des valeurs par défaut lorsqu’ils sont déstructurés à partir d’ Astro.props
.
Les props de composant peuvent recevoir des valeurs par défaut à utiliser lorsqu’aucune n’est fournie
Les emplacements (slots)
Titre de la section Les emplacements (slots)L’élément <slot />
est un emplacement réservé pour du contenu HTML externe, vous permettant d’injecter des éléments enfants depuis d’autres fichiers, dans le template de votre composant.
Par défaut, tous les éléments enfants passés à un composant seront rendus dans son <slot />
Contrairement aux props, qui sont des attributs passés à un composant Astro disponibles pour une utilisation dans votre composant avec Astro.props
, les emplacements restituent les éléments HTML enfants là où ils sont placés.
Ce modèle est la base d’un Composant Layout dans Astro : une page entière de contenu HTML peut être “enveloppée” avec des balises <Layout></Layout>
et envoyée au composant pour être rendue à l’intérieur des éléments de page communs qui y sont définis.
Les emplacements (slots) nommés
Titre de la section Les emplacements (slots) nommésUn composant Astro peut aussi avoir des emplacements nommés. Cela vous permet de ne faire passer que des éléments HTML avec le nom d’emplacement (slot) correspondant, au niveau de l’emplacement.
Les emplacements (slots) sont nommés à l’aide de l’attribut name
:
Pour injecter du contenu HTML dans un emplacement (slot) particulier, utilisez l’attribut slot
sur n’importe quel élément enfant pour spécifier le nom de l’emplacement (slot). Tous les autres éléments enfants du composant seront injectés dans le <slot />
par défaut (sans nom).
Utilisez un attribut slot="my-slot"
sur l’élément enfant que vous voulez passer à un emplacement correspondant <slot name="my-slot" />
dans votre composant.
Pour faire passer plusieurs éléments HTML dans l’espace réservé <slot/>
d’un composant sans qu’ils soient enveloppés par un <div>
, utilisez l’attribut slot=""
sur le composant <Fragment/>
d’Astro:
Injecter plusieurs lignes et colonnes de contenu HTML en utilisant un attribut slot=""
pour spécifier le contenu "header"
et "body"
. Les éléments HTML individuels peuvent également être stylisés :
Notez que les emplacements nommés doivent être des enfants immédiats du composant. Il n’est pas possible de faire passer des emplacements nommés dans des éléments imbriqués.
Les emplacements nommés peuvent aussi être passés aux composants de framework !
Le nom d’un emplacement (slot) Astro ne peut pas être généré dynamiquement, comme dans une fonction map. Si cette fonctionnalité est nécessaire dans les composants framework UI, il est préférable de générer ces emplacements (slots) dynamiques dans le framework lui-même.
Contenu par défaut pour les emplacements
Titre de la section Contenu par défaut pour les emplacementsLa génération dynamique d’un nom de slot Astro, par exemple dans une fonction map, a été ajoutée dans Astro v4.2.0. Pour les versions antérieures d’Astro, il est préférable de générer ces slots dynamiques dans le cadre lui-même.
Transférer les emplacements
Titre de la section Transférer les emplacementsLes emplacements peuvent être transférés à d’autres composants. Par exemple, lorsque l’on crée des mises en page imbriquées :
Les emplacements nommés peuvent être transférés vers un autre composant en utilisant les attributs name
et slot
sur une balise <slot />
.
Maintenant, les emplacements par défaut et head
passés à HomeLayout
seront transférés au parent BaseLayout
.
Composants HTML
Titre de la section Composants HTMLAstro prend en charge l’importation et l’utilisation de fichiers .html
en tant que composants ou le placement de ces fichiers dans le sous-répertoire src/pages
en tant que pages. Vous souhaiterez peut-être utiliser des composants HTML si vous réutilisez le code d’un site existant construit sans framework, ou si vous voulez vous assurer que votre composant n’ai pas de fonctionnalités dynamiques.
Les composants HTML ne doivent contenir que du code HTML valide et ne disposent donc pas des fonctionnalités clés des composants Astro :
- Ils ne prennent pas en charge de Script de Composant, les importations côté serveur ou les expressions dynamiques.
- Toutes les balises
<script>
sont laissées non regroupées, traitées comme si elles avaientis:inline
. - Ils ne peuvent référencer que les assets qui se trouvent dans le dossier
public/
.
Un élément <slot />
à l’intérieur d’un composant HTML fonctionnera comme il le ferait dans un composant Astro. Pour utiliser l’élément Slot des Web Components (composants web) à la place, ajoutez is:inline
à votre élément <slot>
.