Astro est un framework orienté composants, et dans “composants”, il y a “composer” !
Les slots sont l’un des mécanismes proposés par Astro.js pour imbriquer plusieurs composants et construire une page complète.
Les layouts sont des composants que l’on retrouve autour de plusieurs pages. On y met généralement un ou plusieurs menus, un pied de page, et d’autres éléments génériques.
Le layout doit donc pouvoir contrôler où la page doit s’afficher : après le menu, mais avant le pied-de-page par exemple.
C’est exactement le rôle d’un slot ! Il s’agit d’un “placeholder” qui sera remplacé par le contenu de la page.
Voici un exemple de layout:
// layout.astro
---
<body>
<nav>Menu</nav>
<slot></slot>
<footer>Footer</footer>
</body>
Et un exemple de page qui utilise ce layout:
// page.astro
import Layout from "./layout.astro"
--`
<Layout>
<h1>Bienvenue sur ma page</h1>
</Layout>
Tout contenu placé entre les balises ouvrantes et fermantes du composant Layout sera automatiquement inséré à l’emplacement du <slot>
.
Voici le HTML qui sera généré pour cette page :
<body>
<nav>Menu</nav>
<h1>Bienvenu sur ma page</h1>
<footer>Footer</footer>
</body>
Les développeurs React constaterons bien sûr la ressemblance entre un slot, et la prop spéciale children
.
Les développeurs Next.js seront par contre surpris de voir un layout être importé, nous avons expliqué cette subtilité dans un article précédent.
Parfois, un composant peut avoir besoin de plusieurs slots. Pour différencier chaque slot, on va lui associer un nom.
Par exemple, imaginons un layout avec deux colonnes:
// layout-two-cols.astro
---
<body>
<nav>Menu</nav>
<div class="cols">
<slot name="col-left"></slot>
<slot name="col-right"></slot>
</div>
<footer>Footer</footer>
</body>
<style>
.cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
</style>
Chaque page peut maintenant remplir librement les deux colonnes du layout, avec l’attribut slot
:
// page.astro
import LayoutTwoCols from "./layout-two-cols.astro"
---
<LayoutTwoCols>
<div slot="col-left">
Je suis à gauche
</div>
<div slot="col-right">
Je suis à droite
</div>
</LayoutTowCols>
Un développeur React aurait utilisé une approche différente, avec deux props colLeft
et colRight
et une syntaxe très orientée JSX, alors que la syntaxe Astro ressemble plutôt à du HTML.
Une erreur courante est de confondre les attributs “slot” et “name” et d’écrire <div name="col-right">
au lieu de <div slot="col-right">
.
Dans ce cas rien ne s’affichera ! Il faut se rappeler que seul le la balise <slot>
a un attribut “name”.
Enfin une dernière astuce avec les slots : vous pouvez définir un contenu par défaut, il suffit de l’inclure dans la balise slot.
// layout.astro
---
<slot name="col-left">
<div>La colonne de gauche est vide</div>
</slot>
<slot name="col-right">
<div>La colonne de droite est vide</div>
</slot>
Ces messages disparaîtront si la page définit le contenu des colonnes gauche et/ou droite.
Les slots sont le mécanisme fondamental de composition dans Astro. Car les composants n’ont d’intérêt que si on peut les composer !
Les développeurs React devront faire un petit travail d’adaptation pour s’habituer à cette syntaxe, mais les développeurs Vue.js ne seront pas surpris ;)
Vous avez apprécié cette ressource ?
Découvrez toutes nos formations Next.js et Astro en présentiel ou en distanciel