Timeline

Отображает список событий в хронологическом порядке с визуальной линией-соединителем и точками.

Basic

Project Kickoff

Jan 15, 2024

Initial planning meeting with all stakeholders completed.

Design Phase

Feb 3, 2024

UI/UX wireframes and mockups approved by the team.

Development Started

Mar 1, 2024

Frontend and backend development sprints initiated.

Beta Release

Apr 20, 2024

Beta version deployed to staging for internal testing.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Project Kickoff" timestamp="Jan 15, 2024">
      Initial planning meeting completed.
    </VxTimelineItem>
    <VxTimelineItem label="Design Phase" timestamp="Feb 3, 2024" type="primary">
      Wireframes and mockups approved.
    </VxTimelineItem>
    <VxTimelineItem label="Development Started" timestamp="Mar 1, 2024" type="success">
      Frontend and backend sprints initiated.
    </VxTimelineItem>
  </VxTimeline>
</template>

Numbered Dots

Добавьте numbered, чтобы показать номера шагов (01, 02, 03…) внутри точек — удобно для процессов и пошаговых инструкций.

Requirements

Week 1

Gather business requirements and define project scope.

Design

Week 2

Create wireframes, mockups, and design system.

Development

Week 3–6

Build frontend and backend components.

Testing

Week 7

QA testing, bug fixes, and performance optimization.

Launch

Week 8

Deploy to production and monitor metrics.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "numbered" shows 01, 02, 03... inside each dot -->
  <VxTimeline numbered>
    <VxTimelineItem label="Requirements" timestamp="Week 1" type="primary">
      Gather business requirements and define project scope.
    </VxTimelineItem>
    <VxTimelineItem label="Design" timestamp="Week 2" type="primary">
      Create wireframes, mockups, and design system.
    </VxTimelineItem>
    <VxTimelineItem label="Development" timestamp="Week 3–6" type="success">
      Build frontend and backend components.
    </VxTimelineItem>
    <VxTimelineItem label="Testing" timestamp="Week 7" type="warning">
      QA testing, bug fixes, and performance optimization.
    </VxTimelineItem>
    <VxTimelineItem label="Launch" timestamp="Week 8" color="#8b5cf6">
      Deploy to production and monitor metrics.
    </VxTimelineItem>
  </VxTimeline>
</template>

Types

Задайте цвет точки через prop type, чтобы обозначить разные категории событий.

Default

Neutral event

Primary

Main event

Success

Completed

Warning

Needs attention

Danger

Failed

Info

Note

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "type" controls the dot color -->
    <VxTimelineItem label="Default" timestamp="Neutral event" />
    <VxTimelineItem label="Primary" timestamp="Main event" type="primary" />
    <VxTimelineItem label="Success" timestamp="Completed" type="success" />
    <VxTimelineItem label="Warning" timestamp="Needs attention" type="warning" />
    <VxTimelineItem label="Danger" timestamp="Failed" type="danger" />
    <VxTimelineItem label="Info" timestamp="Note" type="info" />
  </VxTimeline>
</template>

Hollow Dots

Добавьте hollow для стиля точки в виде контура — хорошо подходит для незавершённых или будущих событий.

Order Placed

10:30 AM

Payment Confirmed

10:32 AM

Shipped

2:15 PM

Out for Delivery

Pending

Delivered

—

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Order Placed" timestamp="10:30 AM" type="success" />
    <VxTimelineItem label="Payment Confirmed" timestamp="10:32 AM" type="success" />
    <VxTimelineItem label="Shipped" timestamp="2:15 PM" type="primary" />
    <!-- "hollow" makes the dot outlined instead of filled -->
    <VxTimelineItem label="Out for Delivery" timestamp="Pending" type="warning" hollow />
    <VxTimelineItem label="Delivered" timestamp="—" hollow />
  </VxTimeline>
</template>

Custom Dot

Используйте слот dot, чтобы заменить стандартную точку любой иконкой или элементом.

Commit pushed

2 hours ago

fix: resolve null pointer in auth middleware

PR Merged

1 hour ago

#142 — Add rate limiting to API endpoints

Deployment

30 min ago

v2.4.1 deployed to production

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Commit pushed" timestamp="2 hours ago" type="primary">
      <!-- The "dot" slot replaces the default dot circle -->
      <template #dot>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2">
          <circle cx="12" cy="12" r="4"/>
          <line x1="1.05" y1="12" x2="7" y2="12"/>
          <line x1="17.01" y1="12" x2="22.96" y2="12"/>
        </svg>
      </template>
      fix: resolve null pointer in auth middleware
    </VxTimelineItem>
  </VxTimeline>
</template>

Connected Cards

Добавьте connected-cards, чтобы отрисовать содержимое каждого элемента как приподнятую карточку с эффектами при наведении.

Design Review

10:00 AM

Reviewed the new dashboard mockups with the design team. Approved color palette and typography.

Code Review

11:30 AM

Reviewed PR #247 — refactored auth middleware. Left 3 comments, approved after fixes.

Deploy to Staging

2:00 PM

Deployed v2.5.0-rc1 to staging environment. Running smoke tests.

Incident Report

4:30 PM

Memory leak detected in staging. Rolled back to v2.4.2. Investigating root cause.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "connected-cards" wraps each item's content in a card -->
  <VxTimeline connected-cards>
    <VxTimelineItem label="Design Review" timestamp="10:00 AM" type="primary">
      Reviewed the new dashboard mockups.
    </VxTimelineItem>
    <VxTimelineItem label="Code Review" timestamp="11:30 AM" type="success">
      Reviewed PR #247 — refactored auth middleware.
    </VxTimelineItem>
    <VxTimelineItem label="Incident Report" timestamp="4:30 PM" type="danger">
      Memory leak detected in staging. Investigating.
    </VxTimelineItem>
  </VxTimeline>
</template>

Clickable Items

Добавьте clickable к элементам, чтобы сделать их интерактивными с подсветкой при наведении и событиями клика.

Signup Page

Q1 2024

Redesign the signup flow with social login options.

Dashboard v2

Q2 2024

New analytics dashboard with real-time data.

Mobile App

Q3 2024

React Native mobile app with push notifications.

vue

<script setup>
import { ref } from 'vue'
import { VxTimeline, VxTimelineItem } from 'veloxui'

const onItemClick = (label) => {
  console.log('Clicked:', label)
}
</script>

<template>
  <VxTimeline>
    <!-- "clickable" adds hover effect and emits "click" event -->
    <VxTimelineItem
      label="Signup Page"
      timestamp="Q1 2024"
      type="primary"
      clickable
      @click="onItemClick('Signup Page')"
    >
      Redesign the signup flow with social login options.
    </VxTimelineItem>
    <VxTimelineItem
      label="Dashboard v2"
      timestamp="Q2 2024"
      type="success"
      clickable
      @click="onItemClick('Dashboard v2')"
    >
      New analytics dashboard with real-time data.
    </VxTimelineItem>
  </VxTimeline>
</template>

Collapsible Items

Добавьте collapsible, чтобы переключать тело описания по клику. Используйте default-expanded для управления начальным состоянием.

Sprint 1 — Auth Module

Jan 15

Implemented JWT authentication, session management, and OAuth2 integration. Added rate limiting to login endpoints. Wrote unit tests covering all auth flows including edge cases for token expiration and refresh.

Sprint 2 — Dashboard

Feb 1

Built real-time dashboard with WebSocket data feeds, interactive charts using D3.js, and customizable widget layout. Implemented drag-and-drop grid system for user-configurable panels.

Sprint 3 — API v2

Feb 15

Designed and implemented RESTful API v2 with OpenAPI spec, pagination, filtering, and field selection. Added versioned endpoints with backwards-compatible migration path from v1. Performance benchmarks show 40% improvement over v1.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "collapsible" adds a chevron toggle to expand/collapse the body -->
    <VxTimelineItem
      label="Sprint 1 — Auth Module"
      timestamp="Jan 15"
      type="success"
      collapsible
    >
      Implemented JWT authentication, session management, and OAuth2 integration.
    </VxTimelineItem>
    <VxTimelineItem
      label="Sprint 2 — Dashboard"
      timestamp="Feb 1"
      type="success"
      collapsible
      :default-expanded="false"
    >
      Built real-time dashboard with WebSocket feeds and interactive charts.
    </VxTimelineItem>
  </VxTimeline>
</template>

Animated Entrance

Добавьте animated на timeline, чтобы включить каскадные анимации появления с fade-in при прокрутке элементов в поле зрения.

Repository Created

Day 1

Initialized the monorepo with Turborepo.

CI/CD Pipeline

Day 2

Set up GitHub Actions with automated testing and deployment.

First Feature

Day 5

Shipped user authentication with magic link login.

Public Beta

Day 14

Opened beta access to 500 early adopters.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "animated" triggers staggered entrance animations via IntersectionObserver -->
  <VxTimeline animated>
    <VxTimelineItem label="Repository Created" timestamp="Day 1" type="primary">
      Initialized the monorepo with Turborepo.
    </VxTimelineItem>
    <VxTimelineItem label="CI/CD Pipeline" timestamp="Day 2" type="success">
      Set up GitHub Actions with automated testing.
    </VxTimelineItem>
    <VxTimelineItem label="Public Beta" timestamp="Day 14" color="#8b5cf6">
      Opened beta access to 500 early adopters.
    </VxTimelineItem>
  </VxTimeline>
</template>

Loading / Skeleton

Установите loading на отдельные элементы, чтобы отобразить мерцающий скелет-плейсхолдер.

Data Loaded

Just now

This event is fully loaded and visible.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Data Loaded" timestamp="Just now" type="success">
      This event is fully loaded and visible.
    </VxTimelineItem>
    <!-- "loading" shows a shimmer skeleton placeholder -->
    <VxTimelineItem loading />
    <VxTimelineItem loading />
  </VxTimeline>
</template>

Progress Line

Используйте prop progress (0–100), чтобы частично заполнить линию-соединитель — удобно для событий в процессе выполнения.

Research

Complete

Market analysis and competitor research finished.

Prototyping

In Progress

Interactive prototype 65% complete.

Development

Upcoming

Waiting for prototype approval.

Launch

Planned

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Research" type="success" :progress="100">
      Market analysis finished.
    </VxTimelineItem>
    <!-- "progress" fills a colored portion of the connector line (0–100) -->
    <VxTimelineItem label="Prototyping" type="primary" :progress="65">
      Interactive prototype 65% complete.
    </VxTimelineItem>
    <VxTimelineItem label="Development" hollow :progress="0">
      Waiting for prototype approval.
    </VxTimelineItem>
  </VxTimeline>
</template>

Gradient Line

Используйте gradient-color, чтобы создать плавный переход цвета на линии-соединителе между событиями.

Start

Phase 1

Project kickoff with initial planning.

Build

Phase 2

Development and iteration.

Test

Phase 3

Quality assurance and testing.

Ship

Phase 4

Production deployment.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "gradient-color" blends the line from the dot color to the next color -->
    <VxTimelineItem label="Start" type="primary" gradient-color="#22c55e">
      Project kickoff.
    </VxTimelineItem>
    <VxTimelineItem label="Build" color="#22c55e" gradient-color="#f59e0b">
      Development and iteration.
    </VxTimelineItem>
    <VxTimelineItem label="Test" color="#f59e0b" gradient-color="#8b5cf6">
      Quality assurance.
    </VxTimelineItem>
    <VxTimelineItem label="Ship" color="#8b5cf6">
      Production deployment.
    </VxTimelineItem>
  </VxTimeline>
</template>

Expandable Content

Добавьте expandable, чтобы обрезать длинные описания с переключателем «Show more». Количество видимых строк задаётся через max-lines.

Architecture Decision

Mar 1

After extensive evaluation of microservices vs monolith architectures, we decided to go with a modular monolith approach. This gives us the benefit of clear module boundaries and independent deployability without the operational complexity of distributed systems. The decision was informed by our team size (12 engineers), current traffic patterns (50k RPM), and the need to iterate quickly on new features. We can always extract services later if specific modules need independent scaling.

Tech Stack Finalized

Mar 5

Frontend: Vue 3 + TypeScript + Vite. Backend: Go with Chi router. Database: PostgreSQL with pgx driver. Cache: Redis for sessions and hot data. Message queue: NATS for async processing. Infrastructure: Kubernetes on AWS EKS with Terraform IaC. Monitoring: Grafana + Prometheus + Loki stack. CI/CD: GitHub Actions with ArgoCD for GitOps deployments.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "expandable" truncates text, "max-lines" controls visible lines -->
    <VxTimelineItem
      label="Architecture Decision"
      timestamp="Mar 1"
      type="primary"
      expandable
      :max-lines="2"
    >
      After extensive evaluation of microservices vs monolith architectures,
      we decided to go with a modular monolith approach. This gives us the
      benefit of clear module boundaries without operational complexity...
    </VxTimelineItem>
  </VxTimeline>
</template>

Horizontal Mode

Установите mode="horizontal", чтобы разместить события слева направо — идеально для шагов процесса и дорожных карт.

Ideation

Brainstorm and research

Design

Wireframes and prototypes

Build

Development sprints

Launch

Go to market

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "horizontal" lays out the timeline left-to-right -->
  <VxTimeline mode="horizontal">
    <VxTimelineItem label="Ideation" timestamp="Q1" type="primary">
      Brainstorm and research
    </VxTimelineItem>
    <VxTimelineItem label="Design" timestamp="Q2" type="info">
      Wireframes and prototypes
    </VxTimelineItem>
    <VxTimelineItem label="Build" timestamp="Q3" type="success">
      Development sprints
    </VxTimelineItem>
    <VxTimelineItem label="Launch" timestamp="Q4" color="#8b5cf6">
      Go to market
    </VxTimelineItem>
  </VxTimeline>
</template>

Horizontal + Numbered

Комбинируйте mode="horizontal" с numbered для пошагового процесса.

Upload

Select files

Process

Validate data

Review

Check results

Confirm

Finalize

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline mode="horizontal" numbered>
    <VxTimelineItem label="Upload" type="success">Select files</VxTimelineItem>
    <VxTimelineItem label="Process" type="success">Validate data</VxTimelineItem>
    <VxTimelineItem label="Review" type="primary">Check results</VxTimelineItem>
    <VxTimelineItem label="Confirm" hollow>Finalize</VxTimelineItem>
  </VxTimeline>
</template>

Dashed Line

Установите line-style="dashed" на элементе, чтобы показать пунктирный соединитель — удобно для неопределённых или ожидающих событий.

Sprint 1 Complete

Mar 15

Sprint 2 In Progress

Mar 29

Sprint 3 Planned

Apr 12

Release

Apr 26

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Sprint 1 Complete" timestamp="Mar 15" type="success" />
    <!-- "line-style" controls the connector: "solid" (default) or "dashed" -->
    <VxTimelineItem label="Sprint 2 In Progress" timestamp="Mar 29" type="primary" line-style="dashed" />
    <VxTimelineItem label="Sprint 3 Planned" timestamp="Apr 12" hollow line-style="dashed" />
    <VxTimelineItem label="Release" timestamp="Apr 26" hollow />
  </VxTimeline>
</template>

Custom Color

Используйте prop color, чтобы задать произвольный цвет отдельных точек.

Design System

Purple milestone

Mobile App

Pink milestone

API v3

Cyan milestone

Launch

Orange milestone

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "color" overrides the dot color with any CSS color value -->
    <VxTimelineItem label="Design System" timestamp="Q1" color="#8b5cf6">
      Purple milestone
    </VxTimelineItem>
    <VxTimelineItem label="Mobile App" timestamp="Q2" color="#ec4899">
      Pink milestone
    </VxTimelineItem>
  </VxTimeline>
</template>

Sizes

Доступны размеры sm, md (по умолчанию) и lg.

Small

Created

9:00 AM

Updated

11:30 AM

Closed

3:00 PM

Medium

Created

9:00 AM

Updated

11:30 AM

Closed

3:00 PM

Large

Created

9:00 AM

Updated

11:30 AM

Closed

3:00 PM

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline size="sm">
    <VxTimelineItem label="Created" timestamp="9:00 AM" type="primary" />
    <VxTimelineItem label="Updated" timestamp="11:30 AM" type="success" />
  </VxTimeline>

  <VxTimeline size="lg">
    <VxTimelineItem label="Created" timestamp="9:00 AM" type="primary" />
    <VxTimelineItem label="Updated" timestamp="11:30 AM" type="success" />
  </VxTimeline>
</template>

Right Aligned

Установите mode="right", чтобы разместить содержимое справа от timeline.

Application Received

Jan 10, 2024

Phone Screen

Jan 18, 2024

Technical Interview

Jan 25, 2024

Final Decision

Pending

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "mode" controls content placement: "left" (default), "right", "alternate", or "horizontal" -->
  <VxTimeline mode="right">
    <VxTimelineItem label="Application Received" timestamp="Jan 10, 2024" type="primary" />
    <VxTimelineItem label="Phone Screen" timestamp="Jan 18, 2024" type="success" />
    <VxTimelineItem label="Final Decision" timestamp="Pending" type="warning" hollow />
  </VxTimeline>
</template>

Alternate

Установите mode="alternate", чтобы чередовать элементы слева и справа.

Founded

2020

Company established with seed funding.

Series A

2021

Raised $12M to expand the engineering team.

Product Launch

2022

V1.0 launched with 10,000 beta users.

Series B

2023

Raised $45M for international expansion.

IPO

2024

Listed on NASDAQ with $2B valuation.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "alternate" places items on alternating sides of the line -->
  <VxTimeline mode="alternate">
    <VxTimelineItem label="Founded" timestamp="2020" type="primary">
      Company established with seed funding.
    </VxTimelineItem>
    <VxTimelineItem label="Series A" timestamp="2021" type="success">
      Raised $12M to expand engineering.
    </VxTimelineItem>
    <VxTimelineItem label="Product Launch" timestamp="2022" type="info">
      V1.0 launched with 10,000 beta users.
    </VxTimelineItem>
  </VxTimeline>
</template>

Pending

Добавьте pending, чтобы показать индикатор загрузки в конце — обозначает, что ожидаются новые события.

User signed in

10:00:12

Viewed dashboard

10:00:15

Clicked 'Reports'

10:00:23

Recording...

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "pending" adds a spinner at the end, "pending-text" shows optional text -->
  <VxTimeline pending pending-text="Recording...">
    <VxTimelineItem label="User signed in" timestamp="10:00:12" type="primary" />
    <VxTimelineItem label="Viewed dashboard" timestamp="10:00:15" type="info" />
    <VxTimelineItem label="Clicked 'Reports'" timestamp="10:00:23" type="info" />
  </VxTimeline>
</template>

Reverse

Добавьте reverse, чтобы отобразить события в обратном порядке (новые сверху).

Latest event

Apr 2024

Third event

Mar 2024

Second event

Feb 2024

First event

Jan 2024

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "reverse" shows items in reverse order -->
  <VxTimeline reverse>
    <VxTimelineItem label="First event" timestamp="Jan 2024" type="primary" />
    <VxTimelineItem label="Second event" timestamp="Feb 2024" type="success" />
    <VxTimelineItem label="Latest event" timestamp="Apr 2024" type="warning" />
  </VxTimeline>
</template>

Custom Title & Description

Используйте title и description как props или слоты, чтобы полностью настроить содержимое каждого элемента. Слоты title и description позволяют разместить любую разметку — теги, аватары, ссылки, кнопки — внутри timeline.

Olivia Martinauthor

2 hours ago

Pushed 3 commits to main

 fix: resolve auth middleware null pointer
 feat: add rate limiting to API
 docs: update changelog 

Jackson Lee

5 hours ago

Merged PR #142 — Add rate limiting to API endpoints

CI Pipeline

5 hours ago

All 47 tests passed in 2m 34s

vue

<script setup>
import { VxTimeline, VxTimelineItem, VxTag } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- Use title/description slots for rich content -->
    <VxTimelineItem timestamp="2 hours ago" type="primary">
      <template #title>
        <div style="display: flex; align-items: center; gap: 8px;">
          <img src="/avatar.jpg" style="width: 24px; height: 24px; border-radius: 50%;" />
          <span>Olivia Martin</span>
          <VxTag type="primary" size="sm" rounded>author</VxTag>
        </div>
      </template>
      <template #description>
        Pushed 3 commits to <code>main</code>
      </template>
    </VxTimelineItem>

    <!-- Or use title/description as simple string props -->
    <VxTimelineItem
      title="CI Pipeline"
      description="All 47 tests passed in 2m 34s"
      timestamp="5 hours ago"
      type="success"
    />
  </VxTimeline>
</template>

API

VxTimeline Props

Prop	Type	Default	Description
`mode`	`'left' \| 'right' \| 'alternate' \| 'horizontal'`	`'left'`	Направление раскладки и размещение содержимого
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер точек и текста
`pending`	`boolean`	`false`	Показать индикатор загрузки в конце
`pendingText`	`string`	`''`	Текст рядом с индикатором ожидания
`reverse`	`boolean`	`false`	Обратный порядок элементов
`numbered`	`boolean`	`false`	Показывать номера шагов (01, 02…) внутри точек
`animated`	`boolean`	`false`	Включить каскадные анимации появления
`connectedCards`	`boolean`	`false`	Отрисовать все элементы как приподнятые карточки

VxTimelineItem Props

Prop	Type	Default	Description
`type`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Тип цвета точки
`color`	`string`	—	Произвольный цвет точки (переопределяет type)
`title`	`string`	—	Заголовок события (алиас для `label`)
`label`	`string`	—	Заголовок события (алиас для `title`)
`description`	`string`	—	Текст тела события
`timestamp`	`string`	—	Текст времени или даты
`hollow`	`boolean`	`false`	Стиль точки-контура
`lineStyle`	`'solid' \| 'dashed'`	`'solid'`	Стиль линии-соединителя
`clickable`	`boolean`	`false`	Включить клик с эффектом наведения
`collapsible`	`boolean`	`false`	Переключать видимость тела по клику на заголовок
`defaultExpanded`	`boolean`	`true`	Начальное состояние раскрытия (при collapsible)
`card`	`boolean`	`false`	Отрисовать этот элемент как приподнятую карточку
`loading`	`boolean`	`false`	Показать мерцающий скелет-плейсхолдер
`progress`	`number`	—	Частичное заполнение линии (0–100)
`gradientColor`	`string`	—	Конечный цвет градиента для линии-соединителя
`expandable`	`boolean`	`false`	Обрезать тело с переключателем «Show more»
`maxLines`	`number`	`3`	Макс. видимых строк при expandable

VxTimelineItem Events

Event	Payload	Description
`click`	`MouseEvent`	Событие клика по элементу с clickable

VxTimelineItem Slots

Slot	Description
`default`	Содержимое тела события (фолбэк для слота `description`)
`title`	Произвольная разметка заголовка (заменяет prop `title`/`label`)
`label`	Алиас слота `title`
`description`	Произвольная разметка тела (заменяет prop `description` и слот default)
`dot`	Произвольный элемент точки (заменяет круг точки целиком)
`icon`	Иконка, отрисованная внутри круга точки
`timestamp`	Произвольное содержимое временной метки

Timeline ​

Basic ​

Numbered Dots ​

Types ​

Hollow Dots ​

Custom Dot ​

Connected Cards ​

Clickable Items ​

Collapsible Items ​

Animated Entrance ​

Loading / Skeleton ​

Progress Line ​

Gradient Line ​

Expandable Content ​

Horizontal Mode ​

Horizontal + Numbered ​

Dashed Line ​

Custom Color ​

Sizes ​

Right Aligned ​

Alternate ​

Pending ​

Reverse ​

Custom Title & Description ​

API ​

VxTimeline Props ​

VxTimelineItem Props ​

VxTimelineItem Events ​

VxTimelineItem Slots ​

Timeline

Basic

Numbered Dots

Types

Hollow Dots

Custom Dot

Connected Cards

Clickable Items

Collapsible Items

Animated Entrance

Loading / Skeleton

Progress Line

Gradient Line

Expandable Content

Horizontal Mode

Horizontal + Numbered

Dashed Line

Custom Color

Sizes

Right Aligned

Alternate

Pending

Reverse

Custom Title & Description

API

VxTimeline Props

VxTimelineItem Props

VxTimelineItem Events

VxTimelineItem Slots