Bileşenler
Timeline
Bir ray boyunca sıralı olaylar: işaret, başlık, zaman ve isteğe bağlı ayrıntı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Kurulum
Bölüm başlığı “Kurulum”- Paket
@bigbang/ui- İçe aktarma
import { Timeline } from '@bigbang/ui';- Kaynak
- Timeline.tsx
- Storybook
- Timeline · Playground
Timeline, @bigbang/ui paketindedir.
import { Timeline } from '@bigbang/ui';
<Timeline aria-label="Geçmiş" items={[{ id: '1', title: 'Proje oluşturuldu', dateTime: '2026-10-24', tone: 'success' }]} />;Özellikler
Bölüm başlığı “Özellikler”itemsZorunlu- Açıklama
- Gösterilecek sırayla olaylar; en yeniyi sayfaya göre üste ya da alta koyun.
- Tür
readonly TimelineItem[]
aria-label- Açıklama
- Listenin erişilebilir adı.
- Tür
string
aria-labelledby- Açıklama
- Listeyi adlandıran başlığın kimliği.
- Tür
string
className- Açıklama
- Kök öğeye eklenir; yalnızca yerleşim için kullanın.
- Tür
string
Her olay id, title, dateTime, time, description, tone, icon ve children alır.
Veri öznitelikleri
Bölüm başlığı “Veri öznitelikleri”data-component="timeline": liste üzerinde.- Olayda
data-tone;data-part:marker,title,time,description.