Stos

Stos wkłada odstęp między rzeczy. To kontener flex z jednym zadaniem i odpowiedź na większość pytań „jak je od siebie odsunąć” — domyślnie pionowo, poziomo przez direction: 'row'.

Odstępy pochodzą ze skali odstępów, więc rytm strony pozostaje spójny bez tego, żeby ktokolwiek dobierał wartości w pikselach.

Podstawowy stos

Pierwsza

Druga

Trzecia

stack({ gap: 'md' },
  card(cardBody('Pierwsza')),
  card(cardBody('Druga')),
  card(cardBody('Trzecia')),
)

Kierunek

stack({ direction: 'row', gap: 'md' },
  button('Jeden'),
  button({ variant: 'outline' }, 'Dwa'),
  button({ variant: 'outline' }, 'Trzy'),
)

Odstęp

Nazwa tokenu ('xs' … '3xl'), liczba jednostek odstępu albo surowa długość CSS.

xsxsxs

mdmdmd

6 jednostek6 jednostek

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

Wyrównanie

align i justify przyjmują surowe wartości flexboxa, więc działa wszystko, co rozumie CSS.

początekkoniec

i wyrównane

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('początek'),
    chip('koniec'),
  ),
  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' }, 'Wyśrodkowane'),
    chip('i wyrównane'),
  ),
)

Zawijanie

Rząd żetonów albo przycisków, który może się nie zmieścić, potrzebuje wrap — bez tego ściskają się, zamiast przejść do następnego wiersza.

routingdataislandsimagespagefindlighthousesitemaprss

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

Liniowo

inline zamienia stos w inline-flex, więc siada w wierszu tekstu, zamiast zabierać całą szerokość.

Zbudowane w

sitelovite

i niczym więcej.

text(
  'Zbudowane w ',
  stack({ direction: 'row', gap: 'xs', inline: true, align: 'center' },
    chip({ color: 'primary', size: 'sm' }, 'sitelo'),
    chip({ color: 'neutral', size: 'sm' }, 'vite'),
  ),
  ' i niczym więcej.',
)

Jako inny element

stack({ as: 'nav', direction: 'row', gap: 'sm' },
  navLink({ href: '/docs' }, 'Dokumentacja'),
  navLink({ href: '/ui', current: true }, 'UI'),
  navLink({ href: '/examples' }, 'Przykłady'),
)

Propsy

Prop	Typ	Domyślnie	Opis
`direction`	`'row' \| 'column'`	`'column'`	Oś główna.
`gap`	`Space`	`'md'`	Odstęp między dziećmi.
`align`	`string`	`'stretch'`	Dowolna wartość align-items.
`justify`	`string`	`'flex-start'`	Dowolna wartość justify-content.
`wrap`	`boolean \| string`	`false`	true oznacza zawijanie; ciąg znaków przechodzi jako flex-wrap.
`inline`	`boolean`	`false`	Renderuje jako inline-flex.
`as`	`string`	`'div'`	Element do wyrenderowania, np. nav albo ul.