Bileşenler

Inline

Çocukları yatay olarak dizer, dar yerde alt satıra sarar ve aralarındaki boşluğu token ile verir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Inline } from '@bigbang/ui';
Kaynak: Inline.tsx
Storybook: Inline · Playground

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

import { Inline, Button } from '@bigbang/ui';

<Inline gap="md">
  <Button>Birincil buton</Button>
  <Button variant="secondary">İkincil buton</Button>
</Inline>;

Özellikler

gap

Açıklama: Öğeler arası boşluk, space.* ölçeğinden; alt satıra inen öğeler arasında da aynı boşluk kullanılır.
Tür: SpaceToken
Varsayılan: 'sm'

align

Açıklama: Çapraz eksende hiza. baseline, farklı boyuttaki metinleri aynı taban çizgisine oturtur.
Tür: 'start' | 'center' | 'end' | 'baseline'
Varsayılan: 'center'

justify

Açıklama: Ana eksende dağılım. between, ilk ve son öğeyi kenarlara iter.
Tür: 'start' | 'center' | 'end' | 'between'
Varsayılan: 'start'

wrap

Açıklama: Satır dar geldiğinde öğelerin alt satıra inmesine izin verir.
Tür: boolean
Varsayılan: true

render

Açıklama: Başka bir öğe olarak çizer, ör. <ul>, <nav>. 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="inline": kök öğe üzerinde.