Timeline
Semantik durum işaretçilerine sahip kronolojik olaylar.
Timeline.tsx
Derleme tamamlandı
50 bileşen registry çıktısına eklendi.Kod incelemesi
Erişilebilirlik kontrolleri çalıştırılıyor.Yeni sürüm oluşturuldu
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/timeline.jsonKullanım Örneği
import { Timeline } from "@/components/data-display"
<Timeline items={[{ id: "1", title: "Yayınlandı", status: "success", timestamp: "10:24" }]} />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| items | TimelineItem[] | — | Başlık, açıklama, zaman ve durum içeren olaylar. |
| compact | boolean | false | Olaylar arasındaki boşluğu azaltır. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Olay başlıklarının belge hiyerarşisi. |
| ariaLabel | string | "Zaman çizelgesi" | Sıralı olay listesinin erişilebilir adı. |
| item.dateTime | string | — | time elementi için makine tarafından okunabilir tarih. |
| item.statusLabel | string | — | Anlam taşıyan durum işaretçisinin erişilebilir adı. |