Grid

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Grid.tsx

Storybook

Grid · Playground

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

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

<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="lg">
  <Grid.Item>Birinci öğe</Grid.Item>
  <Grid.Item span={{ base: 'full', md: 1 }}>İkinci öğe</Grid.Item>
</Grid>;

Özellikler

columns

Açıklama

Eşit sütun sayısı ya da kırılma noktası başına bir sayı: base 1024 px altı, md 1024 px'ten, lg 1440 px'ten itibaren, ör. { base: 1, md: 2, lg: 3 }. Değeri olmayan kırılma noktası bir küçüğünü kullanır.

Tür

Responsive<GridColumns>

Varsayılan

1

gap

Açıklama

Sütun ve satır arası boşluk, space.* ölçeğinden.

Tür

SpaceToken

Varsayılan

'lg'

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, dış boşluk, üst grid içindeki yerleşim.

Tür

string

children

Açıklama

Grid öğeleri, genellikle Grid.Item.

Tür

ReactNode

Grid.Item’ın prop’ları span, render ve className’dır; yukarıdaki tablo Grid’inkileri gösterir. Bunların dışında yerel <div> öznitelikleri doğrudan iletilir. ref oluşturulan öğeye bağlanır.

Veri öznitelikleri

• data-component="grid": Grid kök öğesi üzerinde.
• data-part="item": Grid.Item üzerinde.