QTimeline компонент временной шкалы

Компонент QTimeline библиотеки Quasar предназначен для визуального представления последовательности событий во времени. Он идеально подходит для отображения процессов, этапов проекта, истории действий пользователя или любых других данных, связанных с хронологическим порядком. QTimeline реализован с возможностью гибкой кастомизации, поддерживает вертикальную и горизонтальную ориентацию, а также адаптивен под мобильные устройства.

Ключевые свойства QTimeline:

  • dense — уменьшает размеры элементов для компактного отображения.
  • reverse — инвертирует порядок элементов.
  • align — выравнивание содержимого, может быть left, right или alternate.
  • side — определяет, с какой стороны располагается контент относительно линии таймлайна.
  • color — цвет линии таймлайна.
  • line-width — толщина линии.
  • no-line — убирает саму линию, оставляя только точки событий.

Создание базового таймлайна

Для начала создаётся контейнер QTimeline, внутри которого размещаются отдельные события с помощью компонента QTimelineEntry. Простейший пример:

<template>
  <q-timeline>
    <q-timeline-entry
      title="Начало проекта"
      subtitle="01.01.2026"
      body="Сбор требований и анализ требований заказчика."
    />
    <q-timeline-entry
      title="Разработка"
      subtitle="15.01.2026"
      body="Начало реализации основных модулей приложения."
    />
    <q-timeline-entry
      title="Тестирование"
      subtitle="01.02.2026"
      body="Проверка корректности работы всех компонентов."
    />
  </q-timeline>
</template>

Особенности структуры:

  • title — заголовок события.
  • subtitle — дополнительная информация (дата или краткий комментарий).
  • body — основной текст описания события.
  • icon — иконка, которая визуально маркирует событие.
  • color — индивидуальный цвет для точки события.

Кастомизация элементов таймлайна

QTimeline позволяет задавать разные цвета и иконки для каждой записи:

<q-timeline>
  <q-timeline-entry
    title="Запуск MVP"
    subtitle="05.02.2026"
    icon="rocket_launch"
    color="green"
    body="Публикация минимально жизнеспособного продукта."
  />
  <q-timeline-entry
    title="Обратная связь"
    subtitle="10.02.2026"
    icon="feedback"
    color="blue"
    body="Сбор отзывов от пользователей."
  />
</q-timeline>

Рекомендации по визуальному восприятию:

  • Использовать контрастные цвета для выделения ключевых этапов.
  • Иконки помогают быстро идентифицировать тип события (например, запуск, ошибка, обновление).

Вертикальная и горизонтальная ориентация

По умолчанию таймлайн вертикальный. Для горизонтальной ориентации используется параметр horizontal:

<q-timeline horizontal>
  <q-timeline-entry
    title="Старт"
    subtitle="01.03.2026"
    body="Начало проекта."
  />
  <q-timeline-entry
    title="Релиз"
    subtitle="15.03.2026"
    body="Выход первой версии продукта."
  />
</q-timeline>

При горизонтальной ориентации также можно управлять выравниванием контента с помощью свойства align, например top или bottom.

Использование слотов для гибкого контента

QTimelineEntry поддерживает слоты, что позволяет полностью кастомизировать отображение:

<q-timeline>
  <q-timeline-entry>
    <template v-slot:title>
      <div style="font-weight: bold; color: red;">Критический этап</div>
    </template>
    <template v-slot:body>
      <p>Проверка безопасности и интеграционных тестов.</p>
      <q-btn label="Подробнее" color="primary" size="sm" />
    </template>
  </q-timeline-entry>
</q-timeline>

Слоты доступны для:

  • icon — кастомная иконка.
  • title — заголовок события.
  • subtitle — подзаголовок.
  • body — основное содержимое записи.

Управление порядком и фильтрация событий

Свойство reverse позволяет отображать события в обратном порядке:

<q-timeline :reverse="true">
  <q-timeline-entry title="Финал" />
  <q-timeline-entry title="Начало" />
</q-timeline>

Для динамических таймлайнов часто используется привязка к массиву объектов и фильтрация:

<q-timeline>
  <q-timeline-entry
    v-for="event in events.filter(e => e.active)"
    :key="event.id"
    :title="event.title"
    :subtitle="event.date"
    :body="event.description"
  />
</q-timeline>

Такой подход упрощает интеграцию с Vuex, Pinia или любыми другими источниками данных.

Взаимодействие с пользователем

QTimelineEntry поддерживает события клика и ховера:

<q-timeline-entry
  title="Обновление версии"
  @click="onEntryClick"
  @mouseover="onEntryHover"
/>

Можно использовать для:

  • Открытия подробного модального окна.
  • Навигации к отдельной странице с описанием этапа.
  • Показ подсказок при наведении на точку.

Стилизация линии таймлайна

Линия, соединяющая события, также поддается кастомизации:

  • color — основной цвет линии.
  • line-width — толщина линии.
  • no-line — полностью скрывает линию, оставляя только точки событий.

Пример:

<q-timeline color="deep-purple" line-width="4px">
  <q-timeline-entry title="Этап 1" color="purple" />
  <q-timeline-entry title="Этап 2" color="indigo" />
</q-timeline>

Альтернирование расположения событий

Свойство align="alternate" позволяет чередовать события слева и справа, создавая визуально динамичную структуру:

<q-timeline align="alternate">
  <q-timeline-entry title="Этап A" />
  <q-timeline-entry title="Этап B" />
  <q-timeline-entry title="Этап C" />
</q-timeline>

Это особенно удобно для длинных временных линий, где важно избежать визуальной монотонности.

Итоговая гибкость и возможности

QTimeline в Quasar сочетает:

  • Полную кастомизацию внешнего вида через свойства и слоты.
  • Поддержку горизонтальной и вертикальной ориентации.
  • Динамическое создание записей через циклы Vue.
  • Управление порядком отображения и выравниванием.
  • События клика и ховера для интерактивности.

Комбинация этих возможностей позволяет создавать как простые, информативные линии времени, так и сложные интерактивные визуализации этапов проекта, истории событий или пользовательских действий.

Оглавление