Timeline

Компонент Timeline предназначен для отображения последовательности событий или шагов процесса во временной шкале. Он используется для визуализации историй, этапов задач, логов действий и других последовательных данных. В Element Plus Timeline реализован с гибкой настройкой элементов, ориентации и стилей.

Основная структура

Базовая структура Timeline состоит из контейнера <el-timeline> и элементов <el-timeline-item>:

<template>
  <el-timeline>
    <el-timeline-item timestamp="2026-03-18 10:00" placement="top">
      Инициализация проекта
    </el-timeline-item>
    <el-timeline-item timestamp="2026-03-19 14:30" placement="top" type="success">
      Завершение первого этапа
    </el-timeline-item>
    <el-timeline-item timestamp="2026-03-20 09:15" placement="top" type="warning">
      Обнаружены проблемы
    </el-timeline-item>
  </el-timeline>
</template>
  • timestamp – дата или время события.
  • placement – положение метки времени относительно элемента (top или bottom).
  • type – цвет маркера события. Возможные значения: success, info, warning, danger.

Настройка внешнего вида

Цвет и стиль маркера

Каждый элемент может иметь собственный цвет и иконку:

<el-timeline-item
  timestamp="2026-03-21 16:00"
  type="danger"
  :icon="ErrorIcon">
  Ошибка выполнения задачи
</el-timeline-item>
  • icon – позволяет использовать кастомные иконки (SVG или компоненты).

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

По умолчанию Timeline вертикальный, но можно задать горизонтальный вид с помощью свойства direction:

<el-timeline direction="horizontal">
  <el-timeline-item timestamp="10:00">Шаг 1</el-timeline-item>
  <el-timeline-item timestamp="12:00">Шаг 2</el-timeline-item>
</el-timeline>
  • direction="horizontal" – располагает элементы слева направо.
  • Для вертикального вида direction="vertical" или не указывать вовсе.

Группировка и разметка событий

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

Timeline позволяет вставлять любые Vue-компоненты внутри элементов:

<el-timeline-item timestamp="12:30">
  <div class="custom-content">
    <h4>Задача выполнена</h4>
    <p>Результаты отправлены в базу данных</p>
  </div>
</el-timeline-item>

Слот default используется для основного содержимого, слот icon – для кастомной иконки.

Линии соединения и цвет элементов

Для создания различимых этапов можно управлять линиями и цветами:

<el-timeline-item
  timestamp="14:00"
  :style="{ borderLeft: '2px dashed #409EFF', color: '#409EFF' }">
  Промежуточная проверка
</el-timeline-item>
  • Стиль линии и текста можно полностью кастомизировать через CSS.
  • Поддерживаются анимации изменения цвета и положения через классы .el-timeline-item__dot и .el-timeline-item__tail.

Продвинутые возможности

Состояния событий

Каждое событие может иметь визуальное состояние:

  • success – зелёный маркер, событие выполнено успешно.
  • info – синий, нейтральная информация.
  • warning – жёлтый, требует внимания.
  • danger – красный, критическая ошибка.

Обратный порядок событий

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

<el-timeline :reverse="true">
  <el-timeline-item timestamp="09:00">Начало работы</el-timeline-item>
  <el-timeline-item timestamp="15:00">Завершение работы</el-timeline-item>
</el-timeline>
  • reverse=true инвертирует порядок элементов, что полезно для логов или хронологических отчетов.

Автоматическая адаптация размеров

Компонент корректно работает с адаптивной версткой:

  • Для вертикальной ориентации элементы выстраиваются по ширине контейнера.
  • Для горизонтальной ориентации автоматически подбирается отступ между событиями.
  • Можно комбинировать с flex или grid для сложных макетов.

Интеграция с динамическими данными

Timeline отлично подходит для динамического контента через v-for:

<template>
  <el-timeline>
    <el-timeline-item
      v-for="event in events"
      :key="event.id"
      :timestamp="event.time"
      :type="event.type">
      {{ event.title }}
    </el-timeline-item>
  </el-timeline>
</template>

<script>
export default {
  data() {
    return {
      events: [
        { id: 1, time: '08:00', title: 'Старт проекта', type: 'success' },
        { id: 2, time: '10:30', title: 'Промежуточный отчёт', type: 'info' },
        { id: 3, time: '12:00', title: 'Ошибка на сервере', type: 'danger' }
      ]
    };
  }
};
</script>
  • Динамическая генерация позволяет строить Timeline из API.
  • Возможна сортировка и фильтрация событий перед выводом.

Пользовательские точки и линии

  • dot – позволяет полностью переопределить маркер события.
  • color – задаёт цвет линии между событиями.
  • Возможность использовать градиенты, SVG или анимацию внутри точек:
<el-timeline-item
  timestamp="13:00"
  color="#FF9900"
  :dot="customDot">
  Событие с уникальным маркером
</el-timeline-item>
  • customDot может быть Vue-компонентом или HTML-разметкой.

Timeline в Element Plus предоставляет гибкий и визуально настраиваемый способ отображения последовательностей событий, позволяя адаптировать его под задачи от простых логов до сложных хронологических диаграмм с динамическими данными и кастомной визуализацией.

Оглавление