Container

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Container içeriği yatayda ortalar ve md genişliğinde (1104 px) sınırlar. Yatay iç boşluk token’dan gelir.

Metin örneği

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <div className="w-full bg-surface-sunken py-lg">
      <Container className="bg-surface-raised py-lg">
        <p className="type-body-md text-fg-default m-0">Metin örneği</p>
      </Container>
    </div>
  );
}

Genişlikler

sm 720 px, md 1104 px, lg 1440 px verir; full sınır koymaz. Örnekte üst kap bu değerlerden dardır, bu yüzden geniş boylar kabın genişliğinde durur.

sm: 720 px

md: 1104 px

lg: 1440 px

full: sınırsız

AçıkKoyu

Kodu kopyala

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

const sizes = [
  ['sm', 'sm: 720 px'],
  ['md', 'md: 1104 px'],
  ['lg', 'lg: 1440 px'],
  ['full', 'full: sınırsız'],
] as const;

export default function Sizes() {
  return (
    <div className="flex w-full flex-col gap-md bg-surface-sunken py-lg">
      {sizes.map(([size, label]) => (
        <Container key={size} size={size} className="bg-surface-raised py-sm">
          <p className="type-label-md text-fg-default m-0">{label}</p>
        </Container>
      ))}
    </div>
  );
}

Ana içerik alanı

render={<main />} Container’ı <main> öğesi olarak çizer. Sayfada tek bir <main> olmalı.

Ana içerik burada yer alır.

AçıkKoyu

Kodu kopyala

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

export default function Landmark() {
  return (
    <div className="w-full bg-surface-sunken py-lg">
      <Container size="sm" render={<main />} className="bg-surface-raised py-lg">
        <p className="type-body-md text-fg-default m-0">Ana içerik burada yer alır.</p>
      </Container>
    </div>
  );
}