Zaman çizelgesi

Zaman çizelgesi, yanında bir çizgi bulunan sıralı bir listedir. Onu items propundan ya da girdiler bir diziden gelecek kadar benzeşmiyorsa timelineItem() çocuklarından kurun.

Temel zaman çizelgesi

Mart 2026
Bileşen kitaplığı
sitelo-ui doksan bileşenle geliyor.
Ocak 2026
Sunucu adaları
Bölgeleri istek anında işlenen statik sayfalar.
Ekim 2025
İlk sürüm
Dosya tabanlı yönlendirme ve bir derleme komutu.

timeline({
  items: [
    { time: 'Mart 2026', title: 'Bileşen kitaplığı', description: 'sitelo-ui doksan bileşenle geliyor.' },
    { time: 'Ocak 2026', title: 'Sunucu adaları', description: 'Bölgeleri istek anında işlenen statik sayfalar.' },
    { time: 'Ekim 2025', title: 'İlk sürüm', description: 'Dosya tabanlı yönlendirme ve bir derleme komutu.' },
  ],
})

Renkli işaretler

12:04
Dağıtım başarılı
204 sayfa yayımlandı.
12:03
Lighthouse geçti
Bütün eşikler karşılandı.
12:01
Bağlantı denetimi uyardı
Bir dış bağlantı zaman aşımına uğradı.
12:00
Derleme başladı

timeline({
  items: [
    { time: '12:04', title: 'Dağıtım başarılı', description: '204 sayfa yayımlandı.', color: 'success' },
    { time: '12:03', title: 'Lighthouse geçti', description: 'Bütün eşikler karşılandı.', color: 'success' },
    { time: '12:01', title: 'Bağlantı denetimi uyardı', description: 'Bir dış bağlantı zaman aşımına uğradı.', color: 'warning' },
    { time: '12:00', title: 'Derleme başladı', color: 'neutral' },
  ],
})

Simgelerle

Az önce
Yayımlandı
2 dakika önce
Derleniyor

timeline(
  timelineItem({
    time: 'Az önce',
    title: 'Yayımlandı',
    color: 'success',
    icon: icon('check', { 'stroke-width': 3.4 }),
  }),
  timelineItem({
    time: '2 dakika önce',
    title: 'Derleniyor',
    color: 'primary',
  }),
)

Zengin girdiler

Bir öğenin çocukları, açıklamasının altına gider.

v2.7.0
Sayfa bölümleri
herofooterstatstepstimelinemockup
v2.6.3
Bakım
Bağımlılık yükseltmeleri ve bir bağlantı denetleyicisi düzeltmesi.

timeline(
  timelineItem({ time: 'v2.7.0', title: 'Sayfa bölümleri', 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: 'Bakım', description: 'Bağımlılık yükseltmeleri ve bir bağlantı denetleyicisi düzeltmesi.' }),
)

Veriden

Statik bir sitedeki alışıldık biçim: data() tarafından yüklenen bir değişiklik günlüğü dosyası, doğrudan öğelere eşlenmiş.

2026-03-01
v2.7.0
Sayfa bölümleri
2026-02-14
v2.6.3
Bakım
2026-01-20
v2.6.0
Sunucu adaları

return (() => {
  const releases = [
    { version: '2.7.0', date: '2026-03-01', summary: 'Sayfa bölümleri' },
    { version: '2.6.3', date: '2026-02-14', summary: 'Bakım' },
    { version: '2.6.0', date: '2026-01-20', summary: 'Sunucu adaları' },
  ]

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

Zaman çizelgesi mi, adımlar mı?

Zaman çizelgesi, en yeniden ya da en eskiden başlayarak ne olduğunu kaydeder ve geçerli bir konumu yoktur. steps() ise biri sürmekte, gerisi önünde ya da arkasında olan bir akıştaki ilerlemeyi gösterir.

Proplar

timeline():

Prop	Tür	Varsayılan	Açıklama
`items`	`Array`	`[]`	Aşağıdaki timelineItem proplarını taşıyan nesneler.

timelineItem():

Prop	Tür	Varsayılan	Açıklama
`time`	`Child`	—	Ne zaman olduğu — bir tarih, bir sürüm, bir saat.
`title`	`Child`	—	Ne olduğu.
`description`	`Child`	—	Altındaki ayrıntı.
`icon`	`Child`	—	İşaretin içindeki biçimlendirme.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	İşaret rengi.

Bir öğenin çocukları, açıklamasının altında işlenir.