Bileşenler

Inline

Çocukları yatay olarak dizer, dar yerde alt satıra sarar 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

Inline çocukları soldan sağa dizer. Varsayılan boşluk sm (6 px), dikey hizalama center, sarma açıktır.

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

export default function Default() {
  return (
    <Inline>
      <Button>Birincil buton</Button>
      <Button variant="secondary">İkincil buton</Button>
      <Button variant="secondary">Üçüncül buton</Button>
    </Inline>
  );
}

Hizalama

align çapraz eksendeki yerleşimi belirler: start, center, end ve baseline. Farklı boyutlu metinleri aynı taban çizgisine oturtmak için baseline kullanın.

Kart başlığıMetin örneği

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

export default function Align() {
  return (
    <Inline gap="3xl" align="start">
      <Inline align="baseline">
        <Text size="lg">Kart başlığı</Text>
        <Text size="sm">Metin örneği</Text>
      </Inline>
      <Inline align="center">
        <Text size="lg">Kart başlığı</Text>
        <Text size="sm">Metin örneği</Text>
      </Inline>
    </Inline>
  );
}

Dağılım

justify ana eksendeki dağılımı belirler: start, center, end ve between. between ilk çocuğu başa, son çocuğu sona iter.

Birinci öğeİkinci öğe

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

export default function Justify() {
  return (
    <Inline justify="between">
      <Text>Birinci öğe</Text>
      <Text>İkinci öğe</Text>
    </Inline>
  );
}

Sarma

wrap varsayılan olarak açıktır: satır dolunca çocuklar alt satıra iner ve satırlar arasında aynı gap kullanılır. wrap={false} çocukları tek satırda tutar; dar yerde taşabilirler.

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

export default function Wrap() {
  return (
    <div style={{ maxWidth: '16rem' }}>
      <Inline>
        <Button>Birincil buton</Button>
        <Button variant="secondary">İkincil buton</Button>
        <Button variant="secondary">Üçüncül buton</Button>
      </Inline>
    </div>
  );
}

Liste olarak

render={<ul />} ile Inline bir <ul> olur; çocukları <li> olarak yazın. Etiket ya da bağlantı grupları için uygundur.

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

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

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

Açık ve koyu mod

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

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

export default function Default() {
  return (
    <Inline>
      <Button>Birincil buton</Button>
      <Button variant="secondary">İkincil buton</Button>
      <Button variant="secondary">Üçüncül buton</Button>
    </Inline>
  );
}