Bileşenler

Grid

Sayfa bölgeleri ve pano yerleşimleri için eşit sütunlu, duyarlı ızgara ve hücre bileşeni (Grid.Item) sunar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Grid, çocukları eşit genişlikte sütunlara yerleştirir. Varsayılan tek sütundur (columns={1}); boşluk lg (12 px). Sütun sayısı 1 ile 12 arasındadır.

Birinci öğe

İkinci öğe

Üçüncü öğe

import { Box, Grid, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Grid columns={3}>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Üçüncü öğe</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Duyarlı sütunlar

columns ekran genişliğine göre bir nesne alabilir: base 1024 px altında, md 1024 px’ten, lg 1440 px’ten başlar. Değer verilmeyen eşik bir küçüğünü korur.

Birinci öğe

İkinci öğe

Üçüncü öğe

Dördüncü öğe

import { Box, Grid, Text } from '@bigbang/ui';

export default function Responsive() {
  return (
    <Grid columns={{ base: 1, md: 2, lg: 4 }}>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Üçüncü öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Dördüncü öğe</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Hücre genişliği

Grid.Item, span ile bir ya da daha çok sütuna yayılır. 'full' tüm satırı kaplar. span da eşik başına bir nesne alabilir.

Birinci öğe

İkinci öğe

Üçüncü öğe

import { Box, Grid, Text } from '@bigbang/ui';

export default function Span() {
  return (
    <Grid columns={3}>
      <Grid.Item span={3}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item span={2}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Üçüncü öğe</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Boşluk

gap hem sütunlar hem satırlar arasındaki boşluğu space ölçeğinden verir; varsayılan lg. Satır ve sütun boşluğu ayrı ayarlanmaz.

Birinci öğe

İkinci öğe

Üçüncü öğe

Birinci öğe

İkinci öğe

Üçüncü öğe

import { Box, Grid, Stack, Text } from '@bigbang/ui';

export default function Gap() {
  return (
    <Stack gap="2xl">
      <Grid columns={3} gap="xs">
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Birinci öğe</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>İkinci öğe</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Üçüncü öğe</Text>
          </Box>
        </Grid.Item>
      </Grid>
      <Grid columns={3} gap="2xl">
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Birinci öğe</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>İkinci öğe</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Üçüncü öğe</Text>
          </Box>
        </Grid.Item>
      </Grid>
    </Stack>
  );
}

Liste olarak

render={<ul />} ile Grid bir <ul>, render={<li />} ile Grid.Item bir <li> olur. Kart ızgaralarında ekran okuyucu öğe sayısını söyler.

Birinci öğe
İkinci öğe
Üçüncü öğe

import { Box, Grid, Text } from '@bigbang/ui';

export default function AsList() {
  return (
    <Grid render={<ul aria-label="Öğe listesi" />} columns={3}>
      <Grid.Item render={<li />}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item render={<li />}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item render={<li />}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Üçüncü öğe</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Açık ve koyu mod

Grid renk taşımaz; çocukların renkleri kendi bileşenlerinden gelir ve açık ve koyu modda kendiliğinden değişir.

Birinci öğe

İkinci öğe

Üçüncü öğe

Birinci öğe

İkinci öğe

Üçüncü öğe

import { Box, Grid, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Grid columns={3}>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Üçüncü öğe</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}