Timeline

Rangkaian kejadian yang berurutan: riwayat perubahan, jejak status pickup, atau langkah yang sudah dilalui.

Dasar

Berikan daftar kejadian dari yang paling lama. Setiap kejadian punya penanda, dan garis penghubung digambar di antara penanda — bukan setelah kejadian terakhir, karena tidak ada apa pun lagi di bawahnya.

21 Sep 2026, 08.40 · Rini Hartati
Permintaan pickup dibuat
PU-0042 untuk lokasi Kantor Bekasi.
21 Sep 2026, 09.10 · Sistem
Armada dijadwalkan
Truk B 1234 XYZ, keberangkatan 13.30.
21 Sep 2026, 14.05 · Bagus Nugroho
Timbangan dicatat
1,8 ton anorganik, 0,3 ton residu.
21 Sep 2026, 15.20 · Bagus Nugroho
Pickup selesai

Isi khusus per kejadian

Slot content-[value] menambahkan blok di bawah deskripsi satu kejadian — misalnya nilai sebelum dan sesudah pada riwayat perubahan. Untuk tampilan yang lebih padat, pakai size="sm" dengan connector="dashed".

2 jam lalu · Rini Hartati
Jadwal diubah
21 Sep, 09.00 22 Sep, 13.30
kemarin · Sistem
Catatan operator ditambahkan
Akses gerbang belakang perlu izin satpam.
3 hari lalu · Dedi Supriadi
Penjemputan dibatalkan

API

Props

Prop	Tipe	Default	Keterangan
items	W4cTimelineItem[]	[]	Kejadian, dari yang paling lama ke yang paling baru.
size	'sm' \| 'md'	'md'	sm untuk riwayat di dalam panel samping atau kartu; md untuk halaman detail.
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	'primary'	Nada penanda untuk kejadian yang tidak membawa warnanya sendiri.
connector	'solid' \| 'dashed' \| 'none'	'solid'	Garis penghubung antar kejadian. dashed untuk riwayat yang tidak berurutan rapat; none bila kejadiannya berdiri sendiri.
reverse	boolean	false	Menggambar dari yang terbaru di atas. Datanya tidak diubah, hanya urutan tampilnya.

W4cTimelineItem

Field	Tipe	Default	Keterangan
title	string	—	Apa yang terjadi, satu baris.
meta	string	—	Baris kecil di atas judul: waktu, pelaku, atau keduanya. Format waktunya milik aplikasi.
description	string	—	Keterangan tambahan di bawah judul.
icon	string	—	Nama ikon Iconify di dalam penanda. Tanpa ikon, penandanya titik kecil.
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	—	Nada penanda kejadian ini, menimpa color milik timeline-nya.
value	string \| number	—	Kunci kejadian, sekaligus akhiran slot content-[value] untuk isi khusus.

Slots

Slot	Tipe	Default	Keterangan
item	{ item, index, last }	—	Mengganti seluruh kolom isi satu kejadian. Penanda dan garisnya tetap milik komponen.
content	{ item, index }	—	Blok tambahan di bawah deskripsi setiap kejadian.
content-[value]	{ item, index }	—	Blok tambahan untuk satu kejadian saja, menimpa slot content.