Bileşenler

Provider

İçindeki her şey için dil, yazı yönü ve hareket tercihini belirler; yerleşimi değiştirmez.

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ç

Dil

locale, kütüphanenin kendi metinlerinin dilini belirler. Örnekteki yükleniyor göstergesinin ekran okuyucu metni seçilen dilde okunur.

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

export default function Locale() {
  return (
    <Provider locale="tr-TR">
      <Button loading>Birincil buton</Button>
    </Provider>
  );
}

Yazı yönü

direction="rtl" içeriği sağdan sola çevirir. Bileşenler mantıksal özellikler kullandığı için kendiliğinden yansır; yönü izleyen ikonlar da ters döner.

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

export default function Direction() {
  return (
    <Provider locale="tr-TR" direction="rtl">
      <Button variant="secondary" endIcon={<Icon name="arrow-right" size="inherit" />}>
        İkincil buton
      </Button>
    </Provider>
  );
}

Azaltılmış hareket

reducedMotion="reduce", işletim sistemi izin verse de içerideki hareketi azaltır. Butona basınca ölçek küçülmesi olmaz; renk değişimi kalır.

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

export default function ReducedMotion() {
  return (
    <Provider locale="tr-TR" reducedMotion="reduce">
      <Button>Birincil buton</Button>
    </Provider>
  );
}

İç içe Provider

İç Provider kendi alanı için dili değiştirir. Hareket ise iç içe geçince azalmış kalır: iç Provider hareketi geri açamaz.

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

export default function Nested() {
  return (
    <Provider locale="tr-TR">
      <div className="flex flex-wrap items-center gap-md">
        <Button loading>Birincil buton</Button>
        <Provider locale="en-GB">
          <Button loading>İkincil buton</Button>
        </Provider>
      </div>
    </Provider>
  );
}

Açık ve koyu mod

Provider görsel bir şey çizmez; açık ve koyu modda ve marka değişiminde içindeki bileşenler kendi token’larını kullanır.

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

export default function Locale() {
  return (
    <Provider locale="tr-TR">
      <Button loading>Birincil buton</Button>
    </Provider>
  );
}