Oś czasu

Oś czasu to lista uporządkowana z linią wzdłuż boku. Zbuduj ją z items albo z dzieci timelineItem(), gdy wpisy nie są na tyle jednorodne, by pochodzić z tablicy.

Podstawowa oś czasu

Marzec 2026
Biblioteka komponentów
sitelo-ui przychodzi z dziewięćdziesięcioma komponentami.
Styczeń 2026
Wyspy serwerowe
Statyczne strony z obszarami renderowanymi w chwili żądania.
Październik 2025
Pierwsze wydanie
Routing oparty na plikach i polecenie budowania.

timeline({
  items: [
    { time: 'Marzec 2026', title: 'Biblioteka komponentów', description: 'sitelo-ui przychodzi z dziewięćdziesięcioma komponentami.' },
    { time: 'Styczeń 2026', title: 'Wyspy serwerowe', description: 'Statyczne strony z obszarami renderowanymi w chwili żądania.' },
    { time: 'Październik 2025', title: 'Pierwsze wydanie', description: 'Routing oparty na plikach i polecenie budowania.' },
  ],
})

Kolorowe znaczniki

12:04
Wdrożenie udane
Opublikowano 204 strony.
12:03
Lighthouse zaliczony
Wszystkie progi spełnione.
12:01
Ostrzeżenie ze sprawdzania odnośników
Jeden zewnętrzny odnośnik przekroczył limit czasu.
12:00
Build wystartował

timeline({
  items: [
    { time: '12:04', title: 'Wdrożenie udane', description: 'Opublikowano 204 strony.', color: 'success' },
    { time: '12:03', title: 'Lighthouse zaliczony', description: 'Wszystkie progi spełnione.', color: 'success' },
    { time: '12:01', title: 'Ostrzeżenie ze sprawdzania odnośników', description: 'Jeden zewnętrzny odnośnik przekroczył limit czasu.', color: 'warning' },
    { time: '12:00', title: 'Build wystartował', color: 'neutral' },
  ],
})

Z ikonami

Przed chwilą
Opublikowane
2 minuty temu
Budowanie

timeline(
  timelineItem({
    time: 'Przed chwilą',
    title: 'Opublikowane',
    color: 'success',
    icon: icon('check', { 'stroke-width': 3.4 }),
  }),
  timelineItem({
    time: '2 minuty temu',
    title: 'Budowanie',
    color: 'primary',
  }),
)

Bogate wpisy

Dzieci wpisu trafiają pod jego opis.

v2.7.0
Sekcje strony
herofooterstatstepstimelinemockup
v2.6.3
Utrzymanie
Podbicia zależności i poprawka w sprawdzaniu odnośników.

timeline(
  timelineItem({ time: 'v2.7.0', title: 'Sekcje strony', 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: 'Utrzymanie', description: 'Podbicia zależności i poprawka w sprawdzaniu odnośników.' }),
)

Z danych

Typowy kształt na witrynie statycznej: plik z listą zmian wczytany przez data() i zmapowany wprost na elementy.

2026-03-01
v2.7.0
Sekcje strony
2026-02-14
v2.6.3
Utrzymanie
2026-01-20
v2.6.0
Wyspy serwerowe

return (() => {
  const releases = [
    { version: '2.7.0', date: '2026-03-01', summary: 'Sekcje strony' },
    { version: '2.6.3', date: '2026-02-14', summary: 'Utrzymanie' },
    { version: '2.6.0', date: '2026-01-20', summary: 'Wyspy serwerowe' },
  ]

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

Oś czasu czy kroki?

Oś czasu zapisuje, co się wydarzyło, od najnowszego albo najstarszego, i nie ma bieżącej pozycji. steps() pokazuje postęp w przebiegu, z jednym krokiem w toku i resztą przed nim albo za nim.

Propsy

timeline():

Prop	Typ	Domyślnie	Opis
`items`	`Array`	`[]`	Obiekty z propsami timelineItem poniżej.

timelineItem():

Prop	Typ	Domyślnie	Opis
`time`	`Child`	—	Kiedy to się stało — data, wersja, godzina.
`title`	`Child`	—	Co się stało.
`description`	`Child`	—	Szczegół pod spodem.
`icon`	`Child`	—	Znaczniki wewnątrz znacznika osi.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Kolor znacznika.

Dzieci wpisu renderują się pod jego opisem.