Bileşenler

AmountInput

Provider dilinde yazılan ve kuruş cinsinden kesin değer bildiren tutar alanı; kayan nokta kullanmaz.

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

Para birimi kutunun içinde, Türkçede sayıdan sonra durur. Alandan çıkınca tutar 1.234,50 biçimine gelir.

Tutar

Kuruşu virgülle ayırın.

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

export default function Default() {
  return (
    <AmountInput label="Tutar" description="Kuruşu virgülle ayırın." placeholder="0,00" className="max-w-xs" />
  );
}

Sınırlar ve değer

min ve max kuruş cinsindendir; dışına çıkınca alan kendi mesajını gösterir. onValueChange bigint verir.

Tutar

En az 10,00 ₺, en fazla 50.000,00 ₺.

150000n

import { AmountInput } from '@bigbang/ui';
import { useState } from 'react';

export default function Limits() {
  const [value, setValue] = useState<bigint | null>(150000n);
  return (
    <div className="flex max-w-xs flex-col gap-md">
      <AmountInput label="Tutar" description="En az 10,00 ₺, en fazla 50.000,00 ₺." value={value} onValueChange={setValue} min={1000n} max={5000000n} name="amount" />
      <code className="type-body-sm text-fg-subtle">{value === null ? 'null' : `${value}n`}</code>
    </div>
  );
}

Açık ve koyu mod

Kutu TextInput ile aynı token’ları kullanır.

Tutar

Kuruşu virgülle ayırın.

Tutar

Kuruşu virgülle ayırın.

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

export default function Default() {
  return (
    <AmountInput label="Tutar" description="Kuruşu virgülle ayırın." placeholder="0,00" className="max-w-xs" />
  );
}