Timeline

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

dateTime Provider dilinde yazılır; time hazır bir metin verir. Ton işaretin rengini, icon noktanın yerini belirler.

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" />;
}

Ek içerik

Bir olayın children içeriği açıklamanın altına gelir: bağlantı, etiket.

1. Ekibe iki kişi davet edildi26 Eki 2026 11:20

   Ayrıntıları aç
2. Proje oluşturuldu24 Eki 2026

AçıkKoyu

Kodu kopyala

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

const items: TimelineItem[] = [
  {
    id: 'invited',
    title: 'Ekibe iki kişi davet edildi',
    dateTime: '2026-10-26T11:20:00',
    children: <Link href="#">Ayrıntıları aç</Link>,
  },
  { id: 'created', title: 'Proje oluşturuldu', dateTime: '2026-10-24' },
];

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

Açık ve koyu mod

İşaretler durum arka planlarını kullanır.

Açık

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

Koyu

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

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" />;
}