TimeField

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

TimeField.tsx

Storybook

TimeField · Playground

TimeField, @bigbang/ui paketindedir.

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

<TimeField label="Saat" name="at" value={time} onValueChange={setTime} min={parseTime('08:00')} />;

Özellikler

labelZorunlu

Açıklama

Görünen etiket; saat parçalarını adlandırır.

Tür

string

description

Açıklama

Alanın altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verilirse alan geçersiz olur ve mesaj okunur. Verilmezse min ve max dışındaki saatler yerleşik bir mesaj alır.

Tür

string

invalid

Açıklama

Alanı mesajsız geçersiz işaretler.

Tür

boolean

Varsayılan

false

required

Açıklama

Saat zorunludur: etiket işaretlenir ve parçalar aria-required bildirir.

Tür

boolean

Varsayılan

false

value

Açıklama

Kontrol ettiğinizde saat, boşken null. onValueChange ile birlikte verin. Saatler @internationalized/date Time türündedir.

Tür

Time | null

defaultValue

Açıklama

Kontrolsüz alanın ilk saati.

Tür

Time

onValueChange

Açıklama

Bütün parçalar dolunca saatle, kullanıcı birini silince null ile çağrılır.

Tür

(value: Time | null) => void

withSeconds

Açıklama

Saniye parçası ekler.

Tür

boolean

Varsayılan

false

min

Açıklama

En erken saat; yazılan önceki bir saat mesaj gösterir.

Tür

Time

max

Açıklama

En geç saat; yazılan sonraki bir saat mesaj gösterir.

Tür

Time

size

Açıklama

Alan yüksekliği: 32, 36 ve 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

readOnly

Açıklama

Saat okunabilir ama değiştirilemez.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Parçaları ve etiketi devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Alan adı; form saati SS:DD (saniyeyle SS:DD:SN) olarak alır.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="time-field": kök öğe üzerinde.
• data-part: label, box, segments, description, error.
• Parçada data-segment (hour, minute, second) ve boşken data-placeholder.