Layout

Stack, Inline et Grid : l'espace entre les pièces provient du parent et ne peut être qu'une étape de l'échelle.

Sur cette page

Pourquoi

L'espace écrit à la main finit par être hors de proportion : une marge supplémentaire ici, un zéro là-bas. Dans Feitio, l'espace entre les éléments appartient toujours au parent et ne peut être qu'un pas de l'échelle. Trois composants s'en chargent, et personne n'écrira plus margin, gap ou padding.

Les trois

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

Empilement

Empilent les éléments, les uns sous les autres, avec le même espace entre tous.

Afficher le code

HTML

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

React

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

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

En ligne

Place les éléments côte à côte et fait défiler la ligne lorsqu'ils ne tiennent pas.

Afficher le code

HTML

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

React

<Inline gap={2}>
  …
</Inline>

Pièce 1Pièce 2Pièce 3Pièce 4Pièce 5Pièce 6

Grille

Colonnes qui s'adaptent à la largeur : chacune a une largeur minimale et, en dessous, passe à la ligne suivante. Elle ne dépasse jamais de l'écran.

Afficher le code

HTML

<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>

React

<Grid gap={3} min="9rem">
  …
</Grid>

Ensemble

Un formulaire complet sans aucune marge : le Stack externe sépare les champs avec space-5, l'intérieur joint l'étiquette, l'astuce et le champ avec space-1, et Inline aligne les boutons.

React

<Stack gap={5}>
  <Stack gap={1}>
    <Label htmlFor="nome">Nome do lembrete</Label>
    <Hint id="nome-dica">Aparece na notificação</Hint>
    <TextInput id="nome" aria-describedby="nome-dica" />
  </Stack>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Salvar lembrete</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>

Attributs

Attribut	Valeurs	Pour quoi
`gap`	`1` à `7` (défaut : 4)	L'espace entre les éléments, un pas de l'échelle. Aucune autre valeur n'est acceptée.
`align`	`"start"`, `"center"`	Dans Stack : comment les éléments s'alignent horizontalement.
`justify`	`"between"`, `"end"`	Dans Inline : comment les éléments se répartissent le long de la ligne.
`min`	une largeur, comme `"15rem"`	En Grid : la largeur minimale de chaque colonne. En dessous, la colonne se réorganise.

Dans React, gap a le type 1 | 2 | 3 | 4 | 5 | 6 | 7 : une valeur hors échelle ne compile même pas.

Règles

L'espace appartient au parent. Un composant n'a aucune marge externe ; le Stack, Inline ou Grid autour de lui décide de la distance avec son voisin.
Aucun espacement vide entre deux éléments. L'espace vit dans le gap du parent.
L'espacement interne appartient au composant : l'espacement d'un bouton ou d'un bloc est prêt et ne change pas à la main.
Un contrôle automatique échoue sur une marge, un gap ou un espacement écrits à la main dans le code de quiconque utilise Feitio.

Les trois fonctionnent sur cette page en CSS pur, et existent aussi en composants Astro et React (@feitio/astro, @feitio/react).