İçeriğe geç
BigBang

Sık açılanlar

    ↑↓Gezin↵AçEscKapat
    EN

    Bileşenler

    TimeField

    Saat ve dakika (isteğe bağlı saniye) parçalarına yazılan 24 saatlik saat 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

    Bölüm başlığı “Varsayılan”

    Saat ve dakika, 24 saat biçiminde. Saat simgesi yalnızca süstür.

    SSDD

    Saati 24 saat biçiminde yazın.

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

    export default function Default() {
      return <TimeField label="Saat" description="Saati 24 saat biçiminde yazın." className="max-w-xs" />;
    }

    Durumlar

    Bölüm başlığı “Durumlar”

    Dolu, saniyeli, zorunlu ve hatalı, aralık dışı (yerleşik mesaj), salt okunur ve devre dışı.

    0930
    093015
    SSDD
    Bir saat girin.
    0715
    08:00 ile 18:00 arasında bir saat girin
    0930
    0930
    import { TimeField, parseTime } from '@bigbang/ui';
    

    export default function States() {
      return (
        <div className="flex max-w-xs flex-col gap-lg">
          <TimeField label="Saat" defaultValue={parseTime('09:30')} />
          <TimeField label="Saat" defaultValue={parseTime('09:30:15')} withSeconds />
          <TimeField label="Saat" error="Bir saat girin." required />
          <TimeField label="Saat" defaultValue={parseTime('07:15')} min={parseTime('08:00')} max={parseTime('18:00')} />
          <TimeField label="Saat" defaultValue={parseTime('09:30')} readOnly />
          <TimeField label="Saat" defaultValue={parseTime('09:30')} disabled />
        </div>
      );
    }

    Kontrollü

    Bölüm başlığı “Kontrollü”

    Değer Time ya da null; formla SS:DD gider.

    1400
    14:00:00
    import { TimeField, parseTime, type Time } from '@bigbang/ui';
    import { useState } from 'react';
    

    export default function Controlled() {
      const [value, setValue] = useState<Time | null>(() => parseTime('14:00'));
      return (
        <div className="flex max-w-xs flex-col gap-sm">
          <TimeField label="Saat" value={value} onValueChange={setValue} />
          <output className="type-body-sm text-fg-subtle tabular-nums">{value?.toString() ?? '—'}</output>
        </div>
      );
    }

    Açık ve koyu mod

    Bölüm başlığı “Açık ve koyu mod”

    Odaktaki parça birincil dolgu alır.

    0930
    093015
    SSDD
    Bir saat girin.
    0715
    08:00 ile 18:00 arasında bir saat girin
    0930
    0930
    0930
    093015
    SSDD
    Bir saat girin.
    0715
    08:00 ile 18:00 arasında bir saat girin
    0930
    0930
    import { TimeField, parseTime } from '@bigbang/ui';
    

    export default function States() {
      return (
        <div className="flex max-w-xs flex-col gap-lg">
          <TimeField label="Saat" defaultValue={parseTime('09:30')} />
          <TimeField label="Saat" defaultValue={parseTime('09:30:15')} withSeconds />
          <TimeField label="Saat" error="Bir saat girin." required />
          <TimeField label="Saat" defaultValue={parseTime('07:15')} min={parseTime('08:00')} max={parseTime('18:00')} />
          <TimeField label="Saat" defaultValue={parseTime('09:30')} readOnly />
          <TimeField label="Saat" defaultValue={parseTime('09:30')} disabled />
        </div>
      );
    }