Lini masa

Lini masa adalah daftar berurutan dengan sebuah garis di sisinya. Bangun dari items, atau dari anak timelineItem() ketika entrinya tidak cukup seragam untuk datang dari sebuah larik.

Lini masa dasar

Maret 2026
Pustaka komponen
sitelo-ui hadir dengan sembilan puluh komponen.
Januari 2026
Island server
Halaman statis dengan bagian yang dirender saat permintaan datang.
Oktober 2025
Rilis pertama
Perutean berbasis berkas dan sebuah perintah build.

timeline({
  items: [
    { time: 'Maret 2026', title: 'Pustaka komponen', description: 'sitelo-ui hadir dengan sembilan puluh komponen.' },
    { time: 'Januari 2026', title: 'Island server', description: 'Halaman statis dengan bagian yang dirender saat permintaan datang.' },
    { time: 'Oktober 2025', title: 'Rilis pertama', description: 'Perutean berbasis berkas dan sebuah perintah build.' },
  ],
})

Penanda berwarna

12:04
Penerapan berhasil
204 halaman diterbitkan.
12:03
Lighthouse lulus
Semua ambang terpenuhi.
12:01
Pemeriksaan tautan memperingatkan
Satu tautan eksternal kehabisan waktu.
12:00
Build dimulai

timeline({
  items: [
    { time: '12:04', title: 'Penerapan berhasil', description: '204 halaman diterbitkan.', color: 'success' },
    { time: '12:03', title: 'Lighthouse lulus', description: 'Semua ambang terpenuhi.', color: 'success' },
    { time: '12:01', title: 'Pemeriksaan tautan memperingatkan', description: 'Satu tautan eksternal kehabisan waktu.', color: 'warning' },
    { time: '12:00', title: 'Build dimulai', color: 'neutral' },
  ],
})

Dengan ikon

Baru saja
Diterbitkan
2 menit lalu
Sedang dibangun

timeline(
  timelineItem({
    time: 'Baru saja',
    title: 'Diterbitkan',
    color: 'success',
    icon: icon('check', { 'stroke-width': 3.4 }),
  }),
  timelineItem({
    time: '2 menit lalu',
    title: 'Sedang dibangun',
    color: 'primary',
  }),
)

Entri kaya

Anak sebuah item masuk ke bawah deskripsinya.

v2.7.0
Bagian halaman
herofooterstatstepstimelinemockup
v2.6.3
Pemeliharaan
Peningkatan dependensi dan perbaikan pemeriksa tautan.

timeline(
  timelineItem({ time: 'v2.7.0', title: 'Bagian halaman', color: 'primary' },
    stack({ direction: 'row', gap: 'xs', wrap: true, style: 'margin-top: 0.5rem' },
      chip({ size: 'sm' }, 'hero'),
      chip({ size: 'sm' }, 'footer'),
      chip({ size: 'sm' }, 'stat'),
      chip({ size: 'sm' }, 'steps'),
      chip({ size: 'sm' }, 'timeline'),
      chip({ size: 'sm' }, 'mockup'),
    ),
  ),
  timelineItem({ time: 'v2.6.3', title: 'Pemeliharaan', description: 'Peningkatan dependensi dan perbaikan pemeriksa tautan.' }),
)

Dari data

Bentuk yang lazim di situs statis: berkas catatan perubahan yang dimuat data(), dipetakan langsung ke item.

2026-03-01
v2.7.0
Bagian halaman
2026-02-14
v2.6.3
Pemeliharaan
2026-01-20
v2.6.0
Island server

return (() => {
  const releases = [
    { version: '2.7.0', date: '2026-03-01', summary: 'Bagian halaman' },
    { version: '2.6.3', date: '2026-02-14', summary: 'Pemeliharaan' },
    { version: '2.6.0', date: '2026-01-20', summary: 'Island server' },
  ]

  return timeline({
    items: releases.map((release) => ({
      time: release.date,
      title: 'v' + release.version,
      description: release.summary,
      color: 'primary',
    })),
  })
})()

Lini masa atau langkah?

Lini masa mencatat apa yang sudah terjadi, terbaru atau terlama lebih dulu, dan tidak punya posisi saat ini. steps() menampilkan kemajuan melalui sebuah alur dengan satu langkah yang sedang berjalan dan sisanya di depan atau di belakangnya.

Props

timeline():

Prop	Tipe	Bawaan	Deskripsi
`items`	`Array`	`[]`	Objek dengan props timelineItem di bawah ini.

timelineItem():

Prop	Tipe	Bawaan	Deskripsi
`time`	`Child`	—	Kapan ia terjadi — sebuah tanggal, versi, atau waktu.
`title`	`Child`	—	Apa yang terjadi.
`description`	`Child`	—	Rinciannya di bawah.
`icon`	`Child`	—	Markup di dalam penandanya.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Warna penandanya.

Anak sebuah item dirender di bawah deskripsinya.