Bileşenler

NumberField

Para olmayan sayılar için adım düğmeli, yerel biçimli sayı alanı.

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

Adım düğmeleri kutunun sonundadır; ok tuşları da değeri değiştirir.

Adet

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

export default function Default() {
  return <NumberField label="Adet" defaultValue={1} min={0} max={99} className="max-w-xs" />;
}

Durumlar

Boş, sınırda (Azalt devre dışı), geçersiz, salt okunur ve devre dışı.

Adet

Yardım metni burada yer alır.

Gün sayısı

Değer 1 ile 30 arasında olmalı.

Adet

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

export default function States() {
  return (
    <div className="flex max-w-xs flex-col gap-lg">
      <NumberField label="Adet" placeholder="0" />
      <NumberField label="Adet" defaultValue={0} min={0} max={10} description="Yardım metni burada yer alır." />
      <NumberField label="Gün sayısı" defaultValue={45} error="Değer 1 ile 30 arasında olmalı." />
      <NumberField label="Adet" defaultValue={3} readOnly />
      <NumberField label="Adet" defaultValue={3} disabled />
    </div>
  );
}

Birimli

unit kısa bir birimi değerin yanında gösterir ve erişilebilir ada ekler. stepper={false} düğmeleri kaldırır.

Gün sayısı

1 ile 30 arası bir değer girin.

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

export default function WithUnit() {
  return (
    <NumberField
      className="max-w-xs"
      label="Gün sayısı"
      unit="gün"
      defaultValue={7}
      min={1}
      max={30}
      stepper={false}
      description="1 ile 30 arası bir değer girin."
    />
  );
}

Biçimli

format Intl seçeneklerini alır; yüzde Provider diline göre yazılır.

Oran

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

export default function Formatted() {
  return (
    <NumberField
      className="max-w-xs"
      label="Oran"
      defaultValue={0.125}
      step={0.005}
      min={0}
      max={1}
      format={{ style: 'percent', minimumFractionDigits: 1 }}
    />
  );
}

Açık ve koyu mod

Kutu ve düğmeler yalnızca anlamsal token kullanır.

Adet

Yardım metni burada yer alır.

Gün sayısı

Değer 1 ile 30 arasında olmalı.

Adet

Yardım metni burada yer alır.

Gün sayısı

Değer 1 ile 30 arasında olmalı.

Adet

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

export default function States() {
  return (
    <div className="flex max-w-xs flex-col gap-lg">
      <NumberField label="Adet" placeholder="0" />
      <NumberField label="Adet" defaultValue={0} min={0} max={10} description="Yardım metni burada yer alır." />
      <NumberField label="Gün sayısı" defaultValue={45} error="Değer 1 ile 30 arasında olmalı." />
      <NumberField label="Adet" defaultValue={3} readOnly />
      <NumberField label="Adet" defaultValue={3} disabled />
    </div>
  );
}