Bileşenler

Box

Dolgu, yüzey rengi, kenarlık ve köşe yarıçapını token değerleriyle veren kapsayıcıdır.

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

Box, içeriğine dolgu, yüzey, kenarlık ve köşe verir. Hiçbir prop verilmezse çıplak bir <div> olur; kart görünümü için padding, background, border ve radius birlikte verilir.

Kart başlığı

Kart açıklaması burada yer alır.

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

export default function Default() {
  return (
    <Box padding="xl" background="raised" border="subtle" radius="md">
      <Stack gap="xs">
        <Heading level={3}>Kart başlığı</Heading>
        <Text>Kart açıklaması burada yer alır.</Text>
      </Stack>
    </Box>
  );
}

Yüzeyler

background yedi değer alır: none, default, raised, sunken, layer-1, layer-2 ve layer-3. Sayfa üstündeki kartlar için raised, çukur alanlar için sunken, üst üste panel yığınları için layer-* kullanın.

Yüzey: default

Yüzey: raised

Yüzey: sunken

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

export default function Surfaces() {
  return (
    <Inline gap="md">
      <Box padding="lg" background="default" border="subtle" radius="md">
        <Text>Yüzey: default</Text>
      </Box>
      <Box padding="lg" background="raised" border="subtle" radius="md">
        <Text>Yüzey: raised</Text>
      </Box>
      <Box padding="lg" background="sunken" border="subtle" radius="md">
        <Text>Yüzey: sunken</Text>
      </Box>
    </Inline>
  );
}

Kenarlık ve köşe

border 1 px’lik default ya da subtle kenarlık çizer. radius sm (6 px), md (8 px) ve lg (16 px) değerlerini alır; varsayılan none köşeyi keskin bırakır.

subtle, sm

default, md

default, lg

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

export default function BordersRadius() {
  return (
    <Inline gap="md">
      <Box padding="lg" border="subtle" radius="sm">
        <Text>subtle, sm</Text>
      </Box>
      <Box padding="lg" border="default" radius="md">
        <Text>default, md</Text>
      </Box>
      <Box padding="lg" border="default" radius="lg">
        <Text>default, lg</Text>
      </Box>
    </Inline>
  );
}

İç boşluk

padding dört kenarı birden ayarlar. paddingInline sağ ve soldaki, paddingBlock üst ve alttaki boşluğu ezer. Değerler space ölçeğindendir: none’dan 7xl’e.

padding: lg

paddingInline: 3xl, paddingBlock: xs

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

export default function Padding() {
  return (
    <Inline gap="md" align="start">
      <Box padding="lg" border="subtle" radius="md">
        <Text>padding: lg</Text>
      </Box>
      <Box paddingInline="3xl" paddingBlock="xs" border="subtle" radius="md">
        <Text>paddingInline: 3xl, paddingBlock: xs</Text>
      </Box>
    </Inline>
  );
}

Bölge olarak

render ile Box başka bir öğeye dönüşür. Aşağıdaki örnek bir <section> üretir ve aria-label ile adlandırır; böylece ekran okuyucuda gezilebilir bir bölge olur.

Kart başlığı

Kart açıklaması burada yer alır.

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

export default function AsSection() {
  return (
    <Box render={<section aria-label="Bölüm" />} padding="xl" background="raised" border="subtle" radius="md">
      <Stack gap="xs">
        <Heading level={3}>Kart başlığı</Heading>
        <Text>Kart açıklaması burada yer alır.</Text>
      </Stack>
    </Box>
  );
}

Açık ve koyu mod

Box yüzey ve kenarlık renklerini color-surface-* ve color-border-* token’larından alır; açık ve koyu modda ayrı bir ayar gerekmez. Üstteki marka seçiciyle markayı değiştirdiğinizde yüzeyler de değişir.

Kart başlığı

Kart açıklaması burada yer alır.

Kart başlığı

Kart açıklaması burada yer alır.

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

export default function Default() {
  return (
    <Box padding="xl" background="raised" border="subtle" radius="md">
      <Stack gap="xs">
        <Heading level={3}>Kart başlığı</Heading>
        <Text>Kart açıklaması burada yer alır.</Text>
      </Stack>
    </Box>
  );
}