CountdownTimer

Ne zaman kullanılır

Bir şeyin süresi dolacaksa ve kullanıcının bunu bilmesi gerekiyorsa: tek kullanımlık kodun geçerliliği, yeniden gönderme beklemesi, oturum zaman aşımı uyarısı.

Ne zaman kullanılmaz

• Geçmiş zaman için: DateTimeText ile “2 dakika önce” yazın.
• İlerleme için: Süreye değil işe bağlı ilerlemeyi Meter ya da ilerleme çubuğuyla gösterin.
• Kullanıcıyı sıkıştırmak için: Gerçek bir süre sınırı yoksa geri sayım koymayın.

Anatomi

01:3001:30

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  const [target] = useState(() => Date.now() + 90_000);
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <CountdownTimer target={target} label="Kodun geçerlilik süresi" />
      <CountdownTimer target={target} label="Kodun geçerlilik süresi" variant="ring" duration={120} warnAt={30} />
    </div>
  );
}

1. Halka (isteğe bağlı): duration boyunca saat yönünde boşalır.
2. Saat: “01:05”; bir saati geçince “1:02:05”.
3. Durum bölgesi (görünmez): Ara bildirimleri okur.

Davranış

• Hedef bir zaman damgasıdır (target); sayfa yenilense de süre sıfırlanmaz. Hedefi sunucudan alın.
• Saat 250 ms’de bir yeniden hesaplanır; arka plandaki sekmeden dönünce doğru saniyeyi gösterir.
• warnAt saniyesinde uyarı rengine, sıfırda soluk renge geçer; renkler yumuşakça değişir.
• Ekran okuyucu her saniyeyi değil, announceAt anlarını duyar: varsayılan 5 dakika, 1 dakika, 10 saniye ve “Süre doldu”.
• Süre dolunca onComplete bir kez çağrılır.
• Yeni bir süre başlatmak için target ile birlikte key verin.

Yönergeler

• Sayacın neyi saydığını yanında yazın ve label ile adlandırın.
• Süre dolunca ne olacağını ve ne yapılabileceğini söyleyin (yeniden gönder, oturumu uzat).
• Oturum zaman aşımında kullanıcıya süreyi uzatma yolu verin (WCAG 2.2.1).

İçerik

Anahtar	TR	EN
ui.countdown-timer.minutes-left	{count} dakika kaldı	{count} min left
ui.countdown-timer.seconds-left	{count} saniye kaldı	{count} s left
ui.countdown-timer.done	Süre doldu	Time is up

İlgili bileşenler

• OtpInput: Kodun girildiği alan.
• DateTimeText: Geçmiş ve gelecek zamanlar.