Bileşenler

CountdownTimer

Bir ana kadar kalan süreyi saat olarak, isteğe bağlı boşalan halkayla, uyarı rengiyle ve sesli ara bildirimlerle gösterir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { CountdownTimer } from '@bigbang/ui';
Kaynak: CountdownTimer.tsx
Storybook: CountdownTimer · Playground

CountdownTimer, @bigbang/ui paketindedir.

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

<CountdownTimer key={expiresAt} target={expiresAt} label="Kodun geçerlilik süresi" warnAt={30} onComplete={enableResend} />;

Saat biçimi için formatClock(seconds) de dışa aktarılır.

Özellikler

targetZorunlu

Açıklama: Sürenin dolduğu an: bir Date, ISO 8601 tarih-saat ya da epoch milisaniyesi. Sunucudan gelir; sayfa yenilenince sıfırlanmaz.
Tür: string | number | Date

label

Açıklama: Sayacı ekran okuyucular için adlandırır, örneğin 'Kodun geçerlilik süresi'.
Tür: string

variant

Açıklama: text yalnızca saat; ring boşalan bir halka ekler.
Tür: 'ring' | 'text'
Varsayılan: 'text'

duration

Açıklama: Halkanın temsil ettiği toplam saniye. Verilmezse bileşen bağlandığında kalan süre.
Tür: number

warnAt

Açıklama: Sayacın uyarı rengine geçtiği kalan saniye.
Tür: number

announceAt

Açıklama: Ekran okuyucuların kalan süreyi duyduğu saniyeler; 0 sürenin dolduğunu söyler.
Tür: readonly number[]
Varsayılan: [300, 60, 10, 0]

onComplete

Açıklama: Süre dolunca bir kez çağrılır.
Tür: () => void

size

Açıklama: Yazı boyutu.
Tür: 'sm' | 'md' | 'lg'
Varsayılan: 'md'

className

Açıklama: Kök öğeye eklenir; yalnızca yerleşim için kullanın.
Tür: string

Veri öznitelikleri

data-component="countdown-timer", data-warning, data-done.
data-part: ring, ring-value, clock, announcement.