bukatchuk ui

Элементы

Лента событий

Вертикальная лента событий по времени: дата, заголовок, описание, состояние пункта.

timeline с версии 0.1.0

Примеры

История релиза
  1. Выполнено: Выкатка на 10% серверов

    Ошибок нет, задержка ответа 210 мс.

  2. Сбой: Рост очереди сообщений

    Очередь выросла до 120 тысяч сообщений, выкатка остановлена.

  3. Сейчас: Разбор причин

    Команда проверяет размер пакета на стороне отправителя.

  4. Впереди: Повторная выкатка

<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

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

ФайлНазначение
timeline.cssстили
example.htmlобразец разметки, в проект не копируется

Варианты

КлассНазначение
is-done
is-current
is-failed