Timeline

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

Структура и базовое использование

Базовый синтаксис компонента Timeline выглядит следующим образом:

import { NTimeline, NTimelineItem } from 'naive-ui'

export default {
  components: { NTimeline, NTimelineItem },
  setup() {
    const events = [
      { content: 'Регистрация пользователя', time: '09:00' },
      { content: 'Подтверждение email', time: '10:15' },
      { content: 'Первый вход в систему', time: '11:00' }
    ]
    return { events }
  },
  template: `
    <n-timeline>
      <n-timeline-item v-for="(event, index) in events" :key="index">
        {{ event.time }} – {{ event.content }}
      </n-timeline-item>
    </n-timeline>
  `
}

Ключевые моменты:

<n-timeline> – контейнер всей последовательности.
<n-timeline-item> – отдельный элемент хронологии.
Поддержка v-for позволяет динамически строить список событий из массива данных.

Настройка направления Timeline

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

vertical – стандартное вертикальное отображение.
horizontal – горизонтальная последовательность.

Пример горизонтальной хронологии:

<n-timeline direction="horizontal">
  <n-timeline-item>Шаг 1</n-timeline-item>
  <n-timeline-item>Шаг 2</n-timeline-item>
  <n-timeline-item>Шаг 3</n-timeline-item>
</n-timeline>

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

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

<n-timeline>
  <n-timeline-item color="green">Успешная операция</n-timeline-item>
  <n-timeline-item color="orange">В ожидании подтверждения</n-timeline-item>
  <n-timeline-item color="red">Ошибка</n-timeline-item>
</n-timeline>

Особенности:

Цвет принимает стандартные CSS значения ('red', '#ff0000', rgb(255,0,0)).
Цвет влияет на маркер события, оставляя текст неизменным.

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

Для более информативного отображения можно добавлять иконки к каждому элементу Timeline. В Naive UI поддерживаются кастомные маркеры через слот icon:

<n-timeline>
  <n-timeline-item>
    <template #icon>
      <n-icon><CheckOutlined /></n-icon>
    </template>
    Пользователь зарегистрирован
  </n-timeline-item>
  <n-timeline-item>
    <template #icon>
      <n-icon><ClockCircleOutlined /></n-icon>
    </template>
    Подтверждение email
  </n-timeline-item>
</n-timeline>

Преимущества кастомных иконок:

Позволяют визуально разграничивать типы событий.
Поддерживают любые SVG или компоненты иконок, интегрированные в Vue.

Метки времени и дополнительная информация

Timeline поддерживает отображение временных меток и описаний через слоты и свойства элементов. Можно использовать time для автоматического вывода времени:

<n-timeline>
  <n-timeline-item time="09:00">Регистрация</n-timeline-item>
  <n-timeline-item time="10:15">Подтверждение email</n-timeline-item>
  <n-timeline-item time="11:00">Первый вход</n-timeline-item>
</n-timeline>

Для более сложного оформления можно добавить description или вложенные блоки через слот контента.

Линия прогресса и завершенные события

С помощью свойства status можно визуально обозначить прогресс или статус события:

success – завершено успешно.
warning – предупреждение или частично завершено.
error – событие завершилось с ошибкой.
default – нейтральное состояние.

Пример:

<n-timeline>
  <n-timeline-item status="success">Регистрация завершена</n-timeline-item>
  <n-timeline-item status="warning">Подтверждение email</n-timeline-item>
  <n-timeline-item status="error">Ошибка при входе</n-timeline-item>
</n-timeline>

Эффект статусов: цвет маркера иконки и линии автоматически подстраивается под статус события.

Вложенные Timeline и группировка

Для отображения сложных процессов можно использовать вложенные Timeline:

<n-timeline>
  <n-timeline-item>
    Подготовка данных
    <n-timeline>
      <n-timeline-item>Загрузка CSV</n-timeline-item>
      <n-timeline-item>Валидация данных</n-timeline-item>
    </n-timeline>
  </n-timeline-item>
  <n-timeline-item>Обработка данных</n-timeline-item>
</n-timeline>

Преимущества вложенности:

Удобно для отображения подэтапов.
Сохраняется единый визуальный стиль и направление.

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

Timeline поддерживает обработку событий клика на отдельные элементы через стандартное событие click:

<n-timeline>
  <n-timeline-item @click="handleClick">Регистрация</n-timeline-item>
</n-timeline>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Элемент Timeline кликнут')
    }
  }
}
</script>

Дополнительно можно использовать hover для подсветки или отображения всплывающих подсказок с дополнительной информацией.