Stack

Les éléments sont empilés les uns sous les autres, avec un espace d'échelle identique entre chacun.

Sur cette page

Playground

123

Espace (gap)

Alignement

Fond

HTML

<div class="feitio-stack" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>

Quand l'utiliser

Quand il y a un espace entre les éléments : l'espace appartient au parent, et n'est qu'un pas de l'échelle.

Quand ne pas l'utiliser

Pour le remplissage interne d'un composant : il est prêt.
Avec une marge manuscrite à côté : jamais ; la vérification l'échoue.

Exemples

Pièce 1Pièce 2Pièce 3

Empilement

Trois pièces à space-3.

Afficher le code

HTML

<div class="feitio-stack" data-gap="3">
  …
</div>

React

<Stack gap={3}>
  …
</Stack>

Un espace par niveau

Plus c’est proche, plus c’est lié : entre les parties, un grand espace (6) ; dans chaque partie, un petit (2). Un Stack dans l’autre, chacun avec le sien.

Afficher le code

HTML

<div class="feitio-stack" data-gap="6">
  <div class="feitio-stack" data-gap="2">…</div>
  <div class="feitio-stack" data-gap="2">…</div>
</div>

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-stack"`	obligatoire	Mise en page.
`data-gap`	`1` à `7`	L'espace entre les éléments. Dans React, aucune autre valeur ne compile.
`align`	`"start"`, `"center"`	Alignement horizontal des éléments.

Les règles et un formulaire complet construit avec les trois sont dans Mise en page.