Pila

Stack mette spazio fra le cose. È un contenitore flex con un solo compito, ed è la risposta a quasi tutte le domande del tipo “come distanzio queste cose” — verticalmente per impostazione predefinita, orizzontalmente con direction: 'row'.

I gap arrivano dalla scala di spaziature, così il ritmo di una pagina resta coerente senza che nessuno scelga valori in pixel.

Pila di base

Primo

Secondo

Terzo

stack({ gap: 'md' },
  card(cardBody('Primo')),
  card(cardBody('Secondo')),
  card(cardBody('Terzo')),
)

Direzione

stack({ direction: 'row', gap: 'md' },
  button('Uno'),
  button({ variant: 'outline' }, 'Due'),
  button({ variant: 'outline' }, 'Tre'),
)

Gap

Il nome di un token ('xs' … '3xl'), un numero di unità di spaziatura, oppure una lunghezza CSS grezza.

xsxsxs

mdmdmd

6 unità6 unità

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à'), chip('6 unità')),
  stack({ direction: 'row', gap: '3rem' }, chip('3rem'), chip('3rem')),
)

Allineamento

align e justify accettano valori flexbox grezzi, quindi funziona tutto ciò che il CSS capisce.

iniziofine

e allineato

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('inizio'),
    chip('fine'),
  ),
  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' }, 'Centrato'),
    chip('e allineato'),
  ),
)

A capo

Una riga di chip o di pulsanti che potrebbe non starci ha bisogno di wrap — senza, si schiacciano invece di andare alla riga successiva.

routingdataislandsimagespagefindlighthousesitemaprss

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

Inline

inline rende la pila un inline-flex, così sta in una riga di testo invece di prendersi tutta la larghezza.

Costruito con

sitelovite

e nient’altro.

text(
  'Costruito con ',
  stack({ direction: 'row', gap: 'xs', inline: true, align: 'center' },
    chip({ color: 'primary', size: 'sm' }, 'sitelo'),
    chip({ color: 'neutral', size: 'sm' }, 'vite'),
  ),
  ' e nient’altro.',
)

Come un altro elemento

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

Props

Prop	Tipo	Predefinito	Descrizione
`direction`	`'row' \| 'column'`	`'column'`	Asse principale.
`gap`	`Space`	`'md'`	Spazio fra i figli.
`align`	`string`	`'stretch'`	Qualunque valore di align-items.
`justify`	`string`	`'flex-start'`	Qualunque valore di justify-content.
`wrap`	`boolean \| string`	`false`	true significa andare a capo; una stringa viene passata come flex-wrap.
`inline`	`boolean`	`false`	Renderizza come inline-flex.
`as`	`string`	`'div'`	Elemento da renderizzare, per esempio nav o ul.