Таймлайн

Таймлайн — это упорядоченный список с линией сбоку. Соберите его из items или из потомков timelineItem(), когда записи слишком разнородны, чтобы приходить из массива.

Простой таймлайн

Март 2026
Библиотека компонентов
sitelo-ui выходит с девяноста компонентами.
Январь 2026
Серверные острова
Статические страницы с областями, которые рендерятся в момент запроса.
Октябрь 2025
Первый релиз
Файловая маршрутизация и команда сборки.

timeline({
  items: [
    { time: 'Март 2026', title: 'Библиотека компонентов', description: 'sitelo-ui выходит с девяноста компонентами.' },
    { time: 'Январь 2026', title: 'Серверные острова', description: 'Статические страницы с областями, которые рендерятся в момент запроса.' },
    { time: 'Октябрь 2025', title: 'Первый релиз', description: 'Файловая маршрутизация и команда сборки.' },
  ],
})

Цветные маркеры

12:04
Развёртывание удалось
Опубликовано 204 страницы.
12:03
Lighthouse пройден
Все пороги достигнуты.
12:01
Предупреждение проверки ссылок
Одна внешняя ссылка не ответила вовремя.
12:00
Сборка началась

timeline({
  items: [
    { time: '12:04', title: 'Развёртывание удалось', description: 'Опубликовано 204 страницы.', color: 'success' },
    { time: '12:03', title: 'Lighthouse пройден', description: 'Все пороги достигнуты.', color: 'success' },
    { time: '12:01', title: 'Предупреждение проверки ссылок', description: 'Одна внешняя ссылка не ответила вовремя.', color: 'warning' },
    { time: '12:00', title: 'Сборка началась', color: 'neutral' },
  ],
})

С иконками

Только что
Опубликовано
2 минуты назад
Собирается

timeline(
  timelineItem({
    time: 'Только что',
    title: 'Опубликовано',
    color: 'success',
    icon: icon('check', { 'stroke-width': 3.4 }),
  }),
  timelineItem({
    time: '2 минуты назад',
    title: 'Собирается',
    color: 'primary',
  }),
)

Насыщенные записи

Потомки записи размещаются под её описанием.

v2.7.0
Секции страницы
herofooterstatstepstimelinemockup
v2.6.3
Поддержка
Подняты зависимости и починен проверяльщик ссылок.

timeline(
  timelineItem({ time: 'v2.7.0', title: 'Секции страницы', 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: 'Поддержка', description: 'Подняты зависимости и починен проверяльщик ссылок.' }),
)

Из данных

Обычная форма для статического сайта: файл журнала изменений, загруженный через data() и напрямую разложенный по записям.

2026-03-01
v2.7.0
Секции страницы
2026-02-14
v2.6.3
Поддержка
2026-01-20
v2.6.0
Серверные острова

return (() => {
  const releases = [
    { version: '2.7.0', date: '2026-03-01', summary: 'Секции страницы' },
    { version: '2.6.3', date: '2026-02-14', summary: 'Поддержка' },
    { version: '2.6.0', date: '2026-01-20', summary: 'Серверные острова' },
  ]

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

Таймлайн или шаги?

Таймлайн фиксирует то, что произошло, — от нового к старому или наоборот — и текущей позиции у него нет. steps() показывает продвижение по процессу: один шаг в работе, остальные впереди или позади.

Пропсы

timeline():

Проп	Тип	По умолчанию	Описание
`items`	`Array`	`[]`	Объекты с пропсами timelineItem из таблицы ниже.

timelineItem():

Проп	Тип	По умолчанию	Описание
`time`	`Child`	—	Когда это случилось — дата, версия, время.
`title`	`Child`	—	Что случилось.
`description`	`Child`	—	Подробность под этим.
`icon`	`Child`	—	Разметка внутри маркера.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Цвет маркера.

Потомки записи рисуются под её описанием.