Timeline

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

import { Timeline } from 'antd';


  Создание проекта
  Разработка компонентов
  Тестирование и отладка
  Деплой на продакшн

В примере выше создается простой вертикальный Timeline с четырьмя событиями. По умолчанию Timeline отображается вертикально, но можно изменить направление с помощью пропса mode.

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

mode определяет расположение контента относительно линии времени. Возможные значения:

  • left — события слева (по умолчанию)
  • right — события справа
  • alternate — события чередуются слева и справа

  Начало проекта
  Планирование
  Разработка
  Релиз

Использование alternate делает Timeline более наглядным при отображении длинной последовательности шагов.

Цветовые обозначения событий

Каждый элемент Timeline.Item может иметь собственный цвет, что помогает визуально разделять типы событий:

  • blue — стандартное событие
  • red — важное событие или ошибка
  • green — успешное завершение

  Запуск сервиса
  Ошибка при деплое
  Успешная проверка

Можно использовать кастомные цвета через CSS или hex-коды для полного контроля над визуальной частью.

Иконки и пользовательские маркеры

Timeline позволяет заменять стандартные точки на кастомные иконки через проп dot:

import { ClockCircleOutlined } from '@ant-design/icons';


  }>
    Время обновления данных
  
  Завершение процесса

Использование иконок улучшает восприятие событий и делает интерфейс более информативным.

Сложные Timeline с вложенными компонентами

Каждый элемент Timeline может содержать любые React-компоненты, что позволяет добавлять подробное содержание:


  
    
Версия 1.0

    
    
      
  • Добавлен базовый функционал
    • 
      
  • Реализована авторизация
    • 
    

  
  
    
Версия 1.1

    
    
      
  • Оптимизация производительности
    • 
      
  • Новые страницы
    •

Такой подход позволяет создавать детальные отчеты о развитии продукта или истории изменений.

Временные метки и отображение даты

Для отображения времени событий можно использовать проп label. Он позволяет закреплять дату или временной промежуток слева или справа от события:


  Начало разработки
  Первый релиз
  Обновление функционала

Совмещение label с mode="alternate" делает Timeline удобным для отображения исторических событий.

Анимация и динамические Timeline

Timeline можно обновлять динамически, используя состояние React. Например:

import { useState } from 'react';
import { Timeline, Button } from 'antd';

const DynamicTimeline = () => {
  const [events, setEvents] = useState(['Старт проекта']);

  const addEvent = () => {
    setEvents([...events, `Событие ${events.length + 1}`]);
  };

  return (
    <>
      
        {events.map((event, index) => (
          {event}
        ))}
      
      
    
  );
};

Такой подход позволяет строить Timeline на основе данных из API или пользовательских действий, делая его интерактивным.

Интеграция с другими компонентами Ant Design

Timeline отлично сочетается с карточками (Card), модальными окнами (Modal) и списками (List) для создания комплексных интерфейсов. Например, каждый шаг Timeline может содержать кнопку, открывающую модальное окно с подробной информацией о событии.

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

Оглавление