Bileşenler

Stack

Çocukları dikey olarak dizer ve aralarındaki boşluğu token ile verir.

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

Stack çocukları yukarıdan aşağıya dizer. Varsayılan boşluk md (8 px), hizalama stretch’tir: çocuklar tam genişliğe yayılır.

Birinci öğe

İkinci öğe

Üçüncü öğe

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

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

Boşluk

gap, space ölçeğinden bir değer alır: none’dan 7xl’e. Bir grup içinde tek bir boşluk kullanın; ilgisiz gruplar arasında daha büyük bir boşluk için dışa bir Stack daha koyun.

Birinci öğe

İkinci öğe

Üçüncü öğe

Birinci öğe

İkinci öğe

Üçüncü öğe

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

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

Hizalama

align çapraz eksendeki yerleşimi belirler: start, center, end ve stretch. stretch dışındaki değerlerde çocuklar kendi içerik genişliğinde kalır.

Birinci öğe

İkinci öğe

Birinci öğe

İkinci öğe

Birinci öğe

İkinci öğe

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

export default function Align() {
  return (
    <Inline gap="3xl" align="start">
      <Stack align="start">
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Stack>
      <Stack align="center">
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Stack>
      <Stack align="end">
        <Box padding="md" border="subtle" radius="sm">
          <Text>Birinci öğe</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>İkinci öğe</Text>
        </Box>
      </Stack>
    </Inline>
  );
}

Ayırıcı

separator çocukların arasına 1 px’lik subtle bir çizgi çeker. İlk çocuğun üstünde ve son çocuğun altında çizgi olmaz; gap çizginin iki yanına dağılır.

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

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

export default function Separator() {
  return (
    <Stack separator gap="md">
      <Text>Birinci öğe</Text>
      <Text>İkinci öğe</Text>
      <Text>Üçüncü öğe</Text>
    </Stack>
  );
}

Liste olarak

render={<ul />} ile Stack bir <ul> olur; çocukları <li> olarak yazın. Böylece ekran okuyucu öğe sayısını söyler.

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

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

export default function AsList() {
  return (
    <Stack render={<ul aria-label="Öğe listesi" />} gap="sm">
      <li>
        <Text>Birinci öğe</Text>
      </li>
      <li>
        <Text>İkinci öğe</Text>
      </li>
      <li>
        <Text>Üçüncü öğe</Text>
      </li>
    </Stack>
  );
}

Açık ve koyu mod

Stack renk taşımaz; yalnızca separator çizgisi color-border-subtle token’ından 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, Stack, Text } from '@bigbang/ui';

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