ДокументацияРазделы, компоненты, системы и их подразделы
Временная шкала
События в хронологическом порядке
Data Display
Timeline сохраняет контекст изменений
Используйте временную шкалу для истории задачи, журнала активности и аудита действий. Для процесса, где пользователь последовательно проходит этапы, подходит Stepper.
История события
Список располагается от нового к старому или от старого к новому — порядок выбирается один раз и сохраняется на всей странице.
- Изменения опубликованы
- Проверка завершена
- Макет отправлен на проверку
.ox-timeline
HTMLИстория изменений
<ol class="ox-timeline">
<li class="ox-timeline-item is-positive">
<time class="ox-timeline-time" datetime="2026-08-19T14:32:00+03:00">
Сегодня, 14:32
</time>
<strong class="ox-timeline-title">Изменения опубликованы</strong>
<span class="ox-timeline-meta">Анна Смирнова · версия 2.4</span>
</li>
</ol>Состояние отмечает характер события
Цвет меняет только точку на шкале. Заголовок события всё равно должен прямо объяснять результат, предупреждение или ошибку.
- Импорт завершён
- Найдены предупреждения
- Синхронизация остановлена
.is-positive
.is-warning
.is-danger
Структура Timeline
Элемент может содержать только нужные части, но заголовок события должен оставаться всегда.
.ox-timelineУпорядоченный список всех событий..ox-timeline-itemОдно завершённое действие или изменение состояния..ox-timeline-timeПонятная пользователю дата или время..ox-timeline-titleГлавный результат события в короткой форме..ox-timeline-metaАвтор, версия, источник или дополнительная деталь.is-positive / warning / dangerСемантический акцент точки без изменения структуры.
Хронология остаётся понятной без линии
Соединительная линия и точки декоративны. Смысл передают порядок списка и текст каждого события.
<ol>Передаёт последовательность событий вспомогательным технологиям.<time datetime>Сохраняет машиночитаемое время при человекочитаемой подписи.Явный порядокСообщите «Сначала новые», если направление может быть неочевидным.Не только цветОшибка или успех называются в заголовке события.