Bileşenler

MoneyText

Kuruş cinsinden bir tutarı Provider dilinde, kayan nokta kullanmadan yazan metin.

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

Türkçede para birimi sayıdan sonra gelir: 1.234,56 ₺. display simge, kod ya da ad seçer; currency başka bir para birimi verir.

1.234,56 ₺1.234,56 ₺1.234,56 TRY1.234,56 €

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

export default function Default() {
  return (
    <div className="flex flex-col items-start gap-md">
      <MoneyText amount={123456n} size="lg" />
      <MoneyText amount="123456" />
      <MoneyText amount={123456n} display="code" />
      <MoneyText amount={123456n} currency="EUR" />
    </div>
  );
}

Boyut ve ton

fraction="subtle" kuruşu küçültür; tone="sign" artıyı yeşil, eksiyi kırmızı yazar ve işareti her zaman gösterir.

Toplam: 123.456,78 ₺
Değişim: +25,00 ₺-25,00 ₺

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

export default function Tones() {
  return (
    <dl className="grid grid-cols-[auto_1fr] items-baseline gap-x-xl gap-y-md">
      <dt className="type-label-sm text-fg-subtle">Toplam</dt>
      <dd>
        <MoneyText amount={12345678n} size="xl" fraction="subtle" />
      </dd>
      <dt className="type-label-sm text-fg-subtle">Değişim</dt>
      <dd className="flex gap-lg">
        <MoneyText amount={2500n} tone="sign" />
        <MoneyText amount={-2500n} tone="sign" />
      </dd>
    </dl>
  );
}

Açık ve koyu mod

Ton renkleri metin token’larından gelir.

Toplam: 123.456,78 ₺
Değişim: +25,00 ₺-25,00 ₺

Toplam: 123.456,78 ₺
Değişim: +25,00 ₺-25,00 ₺

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

export default function Tones() {
  return (
    <dl className="grid grid-cols-[auto_1fr] items-baseline gap-x-xl gap-y-md">
      <dt className="type-label-sm text-fg-subtle">Toplam</dt>
      <dd>
        <MoneyText amount={12345678n} size="xl" fraction="subtle" />
      </dd>
      <dt className="type-label-sm text-fg-subtle">Değişim</dt>
      <dd className="flex gap-lg">
        <MoneyText amount={2500n} tone="sign" />
        <MoneyText amount={-2500n} tone="sign" />
      </dd>
    </dl>
  );
}