Yığın

Yığın, şeylerin arasına boşluk koyar. Tek işi olan bir flex kabıdır ve “bunları nasıl aralarım” sorularının çoğunun yanıtıdır — varsayılan olarak dikey, direction: 'row' ile yatay.

Boşluklar boşluk ölçeğinden gelir, bu yüzden bir sayfanın ritmi kimse piksel değeri seçmeden tutarlı kalır.

Temel yığın

Birinci

İkinci

Üçüncü

stack({ gap: 'md' },
  card(cardBody('Birinci')),
  card(cardBody('İkinci')),
  card(cardBody('Üçüncü')),
)

Yön

stack({ direction: 'row', gap: 'md' },
  button('Bir'),
  button({ variant: 'outline' }, 'İki'),
  button({ variant: 'outline' }, 'Üç'),
)

Boşluk

Bir belirteç adı ('xs' … '3xl'), bir boşluk birimi sayısı ya da ham bir CSS uzunluğu.

xsxsxs

mdmdmd

6 birim6 birim

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

Hizalama

align ve justify ham flexbox değerleri alır, bu yüzden CSS’in anladığı her şey çalışır.

başson

ve hizalanmış

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('baş'),
    chip('son'),
  ),
  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' }, 'Ortalanmış'),
    chip('ve hizalanmış'),
  ),
)

Sarma

Sığmayabilecek bir etiket ya da düğme sırası wrap ister — o olmadan sonraki satıra geçmek yerine sıkışırlar.

routingdataislandsimagespagefindlighthousesitemaprss

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

Satır içi

inline, yığını bir inline-flex yapar, böylece tam genişliği kaplamak yerine bir metin satırının içinde durur.

Şunlarla kuruldu:

sitelovite

ve başka hiçbir şeyle.

text(
  'Şunlarla kuruldu: ',
  stack({ direction: 'row', gap: 'xs', inline: true, align: 'center' },
    chip({ color: 'primary', size: 'sm' }, 'sitelo'),
    chip({ color: 'neutral', size: 'sm' }, 'vite'),
  ),
  ' ve başka hiçbir şeyle.',
)

Başka bir öğe olarak

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

Proplar

Prop	Tür	Varsayılan	Açıklama
`direction`	`'row' \| 'column'`	`'column'`	Ana eksen.
`gap`	`Space`	`'md'`	Çocuklar arasındaki boşluk.
`align`	`string`	`'stretch'`	Herhangi bir align-items değeri.
`justify`	`string`	`'flex-start'`	Herhangi bir justify-content değeri.
`wrap`	`boolean \| string`	`false`	true sarma demektir; bir dize flex-wrap olarak geçirilir.
`inline`	`boolean`	`false`	inline-flex olarak işler.
`as`	`string`	`'div'`	İşlenecek öğe, örneğin nav ya da ul.