Stack

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Stack } from '@bigbang/ui';

Kaynak

Stack.tsx

Storybook

Stack · Playground

Stack, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Stack } from '@bigbang/ui';

<Stack gap="md" separator>
  <span>Birinci öğe</span>
  <span>İkinci öğe</span>
</Stack>;

Özellikler

gap

Açıklama

Öğeler arası boşluk, space.* ölçeğinden. separator ile boşluk her çizginin iki yanına bölünür.

Tür

SpaceToken

Varsayılan

'md'

align

Açıklama

Öğelerin çapraz eksende hizası.

Tür

'start' | 'center' | 'end' | 'stretch'

Varsayılan

'stretch'

separator

Açıklama

Öğelerin arasına 1 px silik bir çizgi çizer; ayar listeleri ve açıklama grupları için.

Tür

boolean

Varsayılan

false

render

Açıklama

Başka bir öğe olarak çizer, ör. <ul>, <section>. Varsayılan <div>.

Tür

ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Açıklama

Yalnızca yerleşim için: genişlik, grid yerleşimi, dış boşluk. Boşluğu ya da yönü değiştirmek için kullanmayın.

Tür

string

children

Açıklama

Okuma sırasındaki öğeler.

Tür

ReactNode

Bunların dışında yerel <div> öznitelikleri (id, role, aria-*, data-*, style) doğrudan iletilir. ref oluşturulan öğeye bağlanır.

Veri öznitelikleri

• data-component="stack": kök öğe üzerinde.