Timeline

Ne zaman kullanılır

Timeline bir kaydın geçmişini göstermek içindir: etkinlik akışı, değişiklik günlüğü, bir talebin aşamaları.

Ne zaman kullanılmaz

• Henüz gelmemiş adımlar için: sıralı bir akış Stepper ile gösterilir.
• Sıralanabilir, süzülebilir kayıtlar için: DataTable kullanın.

Anatomi

1. Yayın durdurulduŞimdi

   Bir kontrol başarısız oldu.

2. İnceleme istendi27 Eki 2026 16:05
3. Ekibe iki kişi davet edildi26 Eki 2026 11:20

   Davetler e-postayla gönderildi.

4. Proje oluşturuldu24 Eki 2026

AçıkKoyu

Kodu kopyala

import { Timeline, type TimelineItem } from '@bigbang/ui';

const items: TimelineItem[] = [
  { id: 'blocked', title: 'Yayın durduruldu', description: 'Bir kontrol başarısız oldu.', time: 'Şimdi', tone: 'danger', icon: 'circle-alert' },
  { id: 'review', title: 'İnceleme istendi', dateTime: '2026-10-27T16:05:00', tone: 'info' },
  { id: 'invited', title: 'Ekibe iki kişi davet edildi', description: 'Davetler e-postayla gönderildi.', dateTime: '2026-10-26T11:20:00' },
  { id: 'created', title: 'Proje oluşturuldu', dateTime: '2026-10-24', tone: 'success', icon: 'check' },
];

export default function Default() {
  return <Timeline items={items} aria-label="Geçmiş" className="max-w-lg" />;
}

1. İşaret: 24 px; nokta ya da simge, tona göre renkli.
2. Ray: İşaretleri birleştiren çizgi; son olaydan sonra yok.
3. Başlık ve zaman: Aynı satırda; dar ekranda alt alta.
4. Açıklama ve ek içerik: İsteğe bağlı.

Davranış

• Olaylar sırayla, 50 ms arayla belirir (en çok sekiz).
• dateTime tarih ve saat içeriyorsa ikisi de, yalnızca tarihse yalnızca tarih yazılır; düz tarih saat dilimiyle kaymaz.
• Sıra sizindir: en yeniyi üste ya da alta koyun ve sayfa boyunca tutarlı olun.

Yönergeler

• Sonucu başlıkta söyleyin (“Yayın durduruldu”); ton yalnızca destekler.
• Göreli zaman (“Şimdi”) için time, kesin zaman için dateTime kullanın.
• Uzun geçmişleri sayfalayın ya da “Daha fazla göster” ile kısaltın.

İçerik

Timeline kendi metnini taşımaz; bütün metinler uygulamadan gelir.

İlgili bileşenler

• Stepper: Gelecek adımlar.
• StatusBadge: Tek bir durum.