MoneyText

Ne zaman kullanılır

Ekranda bir para tutarı gösterilen her yerde: tablo hücresi, özet kartı, onay ekranı.

Ne zaman kullanılmaz

• Tutar girmek için: AmountInput kullanın.
• Para olmayan sayılar için: Sayılar ve yüzdeler için Intl.NumberFormat ya da StatCard yeterlidir.

Kuruş cinsinden tutar

Tutar her zaman en küçük birimde (kuruş, sent) bir bigint ya da tam sayı metni olarak taşınır: 123456n 1.234,56 ₺ demektir. Ondalıklı sayı (number) kabul edilmez; yuvarlama hatası olmaz. Ondalık basamak sayısı para biriminden gelir: TRY için 2, JPY için 0.

Anatomi

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

AçıkKoyu

Kodu kopyala

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>
  );
}

1. İşaret: Eksi her zaman; artı yalnızca tone="sign" ya da signDisplay ile.
2. Tam kısım: Dile göre gruplanır (Türkçede nokta).
3. Kesir: Ondalık ayırıcı ve kuruş; fraction="subtle" ile küçük.
4. Para birimi: Türkçede sonda, İngilizcede dil kalıbına göre.

Davranış

• Biçim Intl.NumberFormat ile, tutarın tam ondalık metninden üretilir; 20 basamaklı tutarlar bile kaymaz.
• Tutar değiştiğinde yeni değer aşağıdan yükselerek belirir.
• Kök öğe <data value="1234.56"> olduğundan makine tarafından okunabilir değer de sayfadadır.
• hidden tutarı “••••” ve para birimiyle değiştirir; tutar o zaman sayfanın hiçbir yerinde kalmaz (metin, title, aria-*, data-*, <data> değeri) ve ekran okuyucu “Tutar gizli” okur. Göster ve gizle düğmesi uygulamanın durumudur.
• compact kısa gösterim yazar (“1,2 Mn ₺”); yalnızca grafikler ve özetler için, kullanıcının işlem yaptığı tutar için değil.

Yönergeler

• Tablolarda tutarları sağa hizalayın; tabular-nums rakamları aynı genişlikte tutar.
• Bir ekranda para birimi yerini değiştirmeyin; varsayılanı kullanın.
• Rengi tek başına kullanmayın; tone="sign" işareti de yazar.

İçerik

Anahtar	TR	EN
ui.money.currency-position	end	locale
ui.money-text.hidden	Tutar gizli	Amount hidden

İlgili bileşenler

• AmountInput: Tutar girişi.
• StatCard: Özet sayılar.