Элементы
Лента событий
Вертикальная лента событий по времени: дата, заголовок, описание, состояние пункта.
Примеры
История релиза
-
Выполнено: Выкатка на 10% серверов
Ошибок нет, задержка ответа 210 мс.
-
Сбой: Рост очереди сообщений
Очередь выросла до 120 тысяч сообщений, выкатка остановлена.
-
Сейчас: Разбор причин
Команда проверяет размер пакета на стороне отправителя.
-
Впереди: Повторная выкатка
<ol class="timeline">
<li class="timeline__item is-done">
<time class="timeline__date" datetime="2026-10-12T22:00">12/10/2026 22:00</time>
<h3 class="timeline__title"><span class="visually-hidden">Выполнено: </span>Выкатка на 10% серверов</h3>
<p class="timeline__text">Ошибок нет, задержка ответа 210 мс.</p>
</li>
<li class="timeline__item is-failed">
<time class="timeline__date" datetime="2026-10-12T22:40">12/10/2026 22:40</time>
<h3 class="timeline__title"><span class="visually-hidden">Сбой: </span>Рост очереди сообщений</h3>
<p class="timeline__text">Очередь выросла до 120 тысяч сообщений, выкатка остановлена.</p>
</li>
<li class="timeline__item is-current" aria-current="step">
<time class="timeline__date" datetime="2026-10-13T09:00">13/10/2026 09:00</time>
<h3 class="timeline__title"><span class="visually-hidden">Сейчас: </span>Разбор причин</h3>
<p class="timeline__text">Команда проверяет размер пакета на стороне отправителя.</p>
</li>
<li class="timeline__item">
<time class="timeline__date" datetime="2026-10-15T12:00">15/10/2026 12:00</time>
<h3 class="timeline__title"><span class="visually-hidden">Впереди: </span>Повторная выкатка</h3>
</li>
</ol>Установка
bukatchuk-ui add timeline
Файлы
| Файл | Назначение |
|---|---|
timeline.css | стили |
example.html | образец разметки, в проект не копируется |
Варианты
| Класс | Назначение |
|---|---|
is-done | |
is-current | |
is-failed |