Zaman çizelgesi
Bir kaydın başından geçenleri tarih sırasıyla, dikey bir çizgi üzerinde gösterir. Sipariş geçmişi, destek talebi süreci ya da işlem kayıtları için uygundur.
Temel kullanım
Olayları acun:timeline içine acun:timeline.item olarak sıralayın. title zorunludur; time başlığın sağında gösterilir ve serbest metindir ("12.09.2026 14:32" ya da "2 saat önce"). Öğenin içine yazdığınız metin başlığın altına gelir.
<acun:timeline>
<acun:timeline.item title="Teslim edildi" time="12.09.2026 14:32">Paket alıcıya kapıda teslim edildi.</acun:timeline.item>
<acun:timeline.item title="Kargoya verildi" time="11.09.2026 09:00">Paket Kadıköy deposundan yola çıktı.</acun:timeline.item>
<acun:timeline.item title="Sipariş oluşturuldu" time="10.09.2026 16:47" />
</acun:timeline>| Prop | Değerler |
|---|---|
title | Olay başlığı (zorunlu) |
time | Başlığın sağındaki zaman metni |
Renkler
Noktanın rengi color ile seçilir; verilmezse brand kullanılır. Rengi olayın sonucuna göre seçin: tamamlanan işler için success, dikkat isteyenler için warning, iptal ve hatalar için danger, sistem kayıtları için neutral.
<acun:timeline>
<acun:timeline.item title="Teslim edildi" time="12.09.2026" color="success" />
<acun:timeline.item title="Alıcı adreste yok" time="10.09.2026" color="warning" />
<acun:timeline.item title="Teslimat iptal edildi" time="08.09.2026" color="danger" />
<acun:timeline.item title="Adres güncellendi" time="05.09.2026" color="info" />
<acun:timeline.item title="Kargoya verildi" time="01.09.2026" />
<acun:timeline.item title="Sipariş oluşturuldu" time="28.08.2026" color="secondary" />
</acun:timeline>| Prop | Değerler |
|---|---|
color | primary | secondary | success | danger | warning | info | dark (brand = primary, neutral = secondary) |
Zengin içerik
İçerik yalnızca metin olmak zorunda değildir; avatar, rozet ya da bağlantı ekleyebilirsiniz. İçerik boşsa yalnızca başlık satırı gösterilir. acun:timeline.item'a verdiğiniz class gibi ek nitelikler li'ye değil içerik kutusuna eklenir.
<acun:timeline>
<acun:timeline.item title="Teslim edildi" time="12.09.2026 14:32" color="success">
<div class="flex flex-wrap items-center gap-2">
<acun:avatar name="Mehmet Kaya" size="xs" color="success" />
<span>Mehmet Kaya teslim aldı</span>
<acun:badge variant="success">Ekspres kargo</acun:badge>
</div>
</acun:timeline.item>
<acun:timeline.item title="Fatura oluşturuldu" time="05.09.2026 10:12" color="info">
<a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">fatura-SIP-10482.pdf</a>
</acun:timeline.item>
<acun:timeline.item title="Sipariş oluşturuldu" time="28.08.2026 16:47" color="secondary" />
</acun:timeline>| Prop | Değerler |
|---|---|
(slot) | Başlığın altındaki içerik; boşsa gösterilmez |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
timeline.item: title | — | Olay başlığı (zorunlu) |
timeline.item: time | null | Başlığın sağındaki zaman metni |
timeline.item: color | primary | primary · secondary · success · danger · warning · info · dark (brand = primary, neutral = secondary) |