Stack
À quoi il sert
Stack empile ses enfants dans l’axe de bloc, avec un espacement entre eux et aucune marge avant le premier ni après le dernier.
Quand l’utiliser
- Espacer des blocs de même niveau, comme des paragraphes ou des sections, avec la prop space.
- Espacer des enfants de hauteur variable sans régler chaque marge à la main.
Quand ne pas l’utiliser
- Pour disposer des éléments côte à côte : utiliser Cluster ou Switcher.
- Pour des colonnes de largeur minimale donnée : utiliser Grid.
- Pour des enfants qui gardent leurs propres marges : le composant les remet à zéro.
Exemples
Premier paragraphe.
Deuxième paragraphe.
Troisième paragraphe.
<Stack space="l" as="section">
<p>Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
</Stack>Variantes
Espacement xs, premier paragraphe.
Espacement xs, deuxième paragraphe.
Espacement xl, premier paragraphe.
Espacement xl, deuxième paragraphe.
Accessibilité
Clavier
- Le composant n’ajoute aucun élément interactif et ne modifie pas le focus.
Lecteur d’écran
- Le composant n’ajoute ni rôle ni libellé.
- Avec as="ul" ou as="ol", la liste reste lue comme liste : les puces ne sont pas retirées.
Garanti par le composant
- Espacement par margin-block et tokens --pp-space-*, sans marge avant le premier enfant.
- L’ordre visuel est celui du DOM : aucune propriété order n’est utilisée.
À la charge de l’intégrateur
- Garder dans le DOM l’ordre de lecture voulu : le composant ne le réordonne pas.
- Avec as="ul", ne mettre que des li comme enfants directs.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| space | "xs" | "s" | "m" | "l" | "xl" | 'm' | Espacement entre les enfants (token `--pp-space-*`). |
| as | "div" | "section" | "ul" | "ol" | "article" | 'div' | Élément rendu. Avec `ul` ou `ol`, les enfants doivent être des `<li>`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-space-l--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.3.2 Ordre de lecture significatif (niveau A) : ordre visuel égal à l’ordre du DOM.
- WCAG 1.4.10 Reflow (niveau AA) : test sur chaque page construite.
- Tests : packages/astro/test/Stack.test.ts, apps/docs/e2e/layout.spec.ts
- Code source : packages/astro/src/layout/Stack.astro