Tumpukan

Tumpukan menaruh jarak di antara hal-hal. Ia adalah wadah flex dengan satu tugas, dan ia adalah jawaban untuk sebagian besar pertanyaan “bagaimana saya memberi jarak pada ini” — tegak secara bawaan, mendatar dengan direction: 'row'.

Celahnya berasal dari skala jarak, jadi irama sebuah halaman tetap konsisten tanpa siapa pun memilih nilai piksel.

Tumpukan dasar

Pertama

Kedua

Ketiga

stack({ gap: 'md' },
  card(cardBody('Pertama')),
  card(cardBody('Kedua')),
  card(cardBody('Ketiga')),
)

Arah

stack({ direction: 'row', gap: 'md' },
  button('Satu'),
  button({ variant: 'outline' }, 'Dua'),
  button({ variant: 'outline' }, 'Tiga'),
)

Celah

Nama token ('xs' … '3xl'), jumlah satuan jarak, atau panjang CSS mentah.

xsxsxs

mdmdmd

6 satuan6 satuan

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

Perataan

align dan justify menerima nilai flexbox mentah, jadi apa pun yang dipahami CSS akan bekerja.

awalakhir

dan sejajar

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('awal'),
    chip('akhir'),
  ),
  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' }, 'Terpusat'),
    chip('dan sejajar'),
  ),
)

Pembungkusan

Sebaris chip atau tombol yang mungkin tidak muat butuh wrap — tanpa itu mereka terjepit alih-alih pindah ke baris berikutnya.

routingdataislandsimagespagefindlighthousesitemaprss

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

Sebaris

inline menjadikan tumpukannya sebuah inline-flex, jadi ia duduk di dalam satu baris teks alih-alih mengambil lebar penuh.

Dibangun dengan

sitelovite

dan tidak ada lagi.

text(
  'Dibangun dengan ',
  stack({ direction: 'row', gap: 'xs', inline: true, align: 'center' },
    chip({ color: 'primary', size: 'sm' }, 'sitelo'),
    chip({ color: 'neutral', size: 'sm' }, 'vite'),
  ),
  ' dan tidak ada lagi.',
)

Sebagai elemen lain

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

Props

Prop	Tipe	Bawaan	Deskripsi
`direction`	`'row' \| 'column'`	`'column'`	Sumbu utamanya.
`gap`	`Space`	`'md'`	Jarak antaranak.
`align`	`string`	`'stretch'`	Nilai align-items apa pun.
`justify`	`string`	`'flex-start'`	Nilai justify-content apa pun.
`wrap`	`boolean \| string`	`false`	true berarti membungkus; sebuah string diteruskan sebagai flex-wrap.
`inline`	`boolean`	`false`	Dirender sebagai inline-flex.
`as`	`string`	`'div'`	Elemen yang dirender, misalnya nav atau ul.