Pile

Stack met de l’espace entre les choses. C’est un conteneur flex avec une seule mission, et la réponse à la plupart des questions « comment j’espace ça » — verticalement par défaut, horizontalement avec direction: 'row'.

Les écarts viennent de l’échelle d’espacement : le rythme d’une page reste donc cohérent sans que personne ne choisisse de valeurs en pixels.

Pile de base

Première

Deuxième

Troisième

stack({ gap: 'md' },
  card(cardBody('Première')),
  card(cardBody('Deuxième')),
  card(cardBody('Troisième')),
)

Direction

stack({ direction: 'row', gap: 'md' },
  button('Un'),
  button({ variant: 'outline' }, 'Deux'),
  button({ variant: 'outline' }, 'Trois'),
)

Écart

Un nom de jeton ('xs' … '3xl'), un nombre d’unités d’espacement, ou une longueur CSS brute.

xsxsxs

mdmdmd

6 unités6 unités

3rem3rem

stack({ gap: 'lg' },
  stack({ direction: 'row', gap: 'xs' }, chip('xs'), chip('xs'), chip('xs')),
  stack({ direction: 'row', gap: 'md' }, chip('md'), chip('md'), chip('md')),
  stack({ direction: 'row', gap: 6 }, chip('6 unités'), chip('6 unités')),
  stack({ direction: 'row', gap: '3rem' }, chip('3rem'), chip('3rem')),
)

Alignement

align et justify prennent des valeurs flexbox brutes : tout ce que CSS comprend fonctionne.

débutfin

et aligné

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm', justify: 'space-between', style: 'background: var(--su-surface-2); padding: 0.6rem; border-radius: 0.5rem' },
    chip('début'),
    chip('fin'),
  ),
  stack({ direction: 'row', gap: 'sm', justify: 'center', align: 'center', style: 'background: var(--su-surface-2); padding: 0.6rem; border-radius: 0.5rem' },
    button({ size: 'sm' }, 'Centré'),
    chip('et aligné'),
  ),
)

Retour à la ligne

Une rangée de puces ou de boutons qui risque de ne pas tenir a besoin de wrap — sans lui, ils s’écrasent au lieu de passer à la ligne suivante.

routingdataislandsimagespagefindlighthousesitemaprss

stack({ direction: 'row', gap: 'sm', wrap: true },
  ...['routing', 'data', 'islands', 'images', 'pagefind', 'lighthouse', 'sitemap', 'rss'].map(
    (name) => chip({ color: 'neutral' }, name),
  ),
)

En ligne

inline fait de la pile un inline-flex : elle se pose dans une ligne de texte au lieu de prendre toute la largeur.

Fait avec

sitelovite

et rien d’autre.

text(
  'Fait avec ',
  stack({ direction: 'row', gap: 'xs', inline: true, align: 'center' },
    chip({ color: 'primary', size: 'sm' }, 'sitelo'),
    chip({ color: 'neutral', size: 'sm' }, 'vite'),
  ),
  ' et rien d’autre.',
)

Comme un autre élément

stack({ as: 'nav', direction: 'row', gap: 'sm' },
  navLink({ href: '/fr/docs' }, 'Documentation'),
  navLink({ href: '/fr/ui', current: true }, 'UI'),
  navLink({ href: '/fr/examples' }, 'Exemples'),
)

Props

Prop	Type	Défaut	Description
`direction`	`'row' \| 'column'`	`'column'`	Axe principal.
`gap`	`Space`	`'md'`	Espace entre les enfants.
`align`	`string`	`'stretch'`	N’importe quelle valeur align-items.
`justify`	`string`	`'flex-start'`	N’importe quelle valeur justify-content.
`wrap`	`boolean \| string`	`false`	true pour passer à la ligne ; une chaîne est transmise comme flex-wrap.
`inline`	`boolean`	`false`	Rendue en inline-flex.
`as`	`string`	`'div'`	Élément à rendre, par exemple nav ou ul.