Stack

Stack permet de créer facilement des assemblages de vues, alignées et réparties équitablements, à la manière de l'Auto Layout de Figma ou du Flexbox en CSS.

Exemple

Cet exemple aligne 3 titres H2 verticalement avec un espacement de 12 pixels

example.tsx

Copier

<Stack
  direction="vertical"
  gap={12}
>
  <Typography variant="h2">
    Hey
  </Typography>
  <Typography variant="h2">
    Comment
  </Typography>
  <Typography variant="h2">
    Ça va
  </Typography>
</Stack>

Propriétés

direction

Direction de l'alignement des éléments :

• horizontal

• vertical (par défaut)

gap

Espacement entre les éléments

padding

Espacement autour des éléments de la Stack

margin

Espacement au dehors des éléments de la Stack

vAlign

Alignement vertical à l'intérieur de la Stack

hAlign

Alignement horizontal à l'intérieur de la Stack

inline

Empêche la Stack de prendre toute la largeur

flex

Applique flex: 1 a la Stack

backgroundColor

Applique une couleur de fond à la Stack

radius

Valeur d'arrondi de la stack

card

Transforme la stack en une Carte similaire a une <List />

flat

Désactive les ombres lorsque card est actif.