Timeline

Hodisalar ro‘yxatini xronologik tartibda vizual ulovchi chiziq va nuqtalar bilan ko‘rsating.

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

Nuqtalar ichida qadam raqamlarini (01, 02, 03...) ko‘rsatish uchun numbered’ni qo‘shing — jarayon oqimlari va qadamba-qadam qo‘llanmalar uchun juda mos keladi.

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

Turli hodisa toifalarini belgilash uchun type prop yordamida nuqtani ranglang.

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

Konturli nuqta uslubi uchun hollow’ni qo‘shing — tugallanmagan yoki kelajakdagi hodisalarni ajratish uchun qulay.

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

Standart nuqtani istalgan ikon yoki element bilan almashtirish uchun dot slotidan foydalaning.

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

Har bir element kontentini hover effektlari bilan ko‘tarilgan karta sifatida renderlash uchun connected-cards’ni qo‘shing.

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

Elementlarni hover ajratish va click hodisalari bilan interaktiv qilish uchun ularga clickable’ni qo‘shing.

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

Bosish orqali tavsif qismini ochib-yopib turish uchun collapsible’ni qo‘shing. Dastlabki holatni boshqarish uchun default-expanded’dan foydalaning.

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

Elementlar ko‘rinish maydoniga scroll qilinganda bosqichma-bosqich fade-in kirish animatsiyalarini yoqish uchun timeline’ga animated’ni qo‘shing.

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

Alohida elementlarda shimmerli skelet placeholder’ini ko‘rsatish uchun loading’ni belgilang.

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

Ulovchi chiziqni qisman to‘ldirish uchun progress prop’idan (0–100) foydalaning — jarayonda bo‘layotgan hodisalar uchun qulay.

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

Hodisalar orasidagi ulovchi chiziqda silliq rang o‘tishini yaratish uchun gradient-color’dan foydalaning.

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

Uzun tavsiflarni "Show more" tugmasi bilan qisqartirish uchun expandable’ni qo‘shing. Ko‘rinadigan qatorlar sonini max-lines orqali boshqaring.

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

Hodisalarni chapdan o‘ngga oqim sifatida joylashtirish uchun mode="horizontal"’ni belgilang — jarayon qadamlari va roadmap’lar uchun ideal.

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

Qadamba-qadam jarayon oqimi uchun mode="horizontal"’ni numbered bilan birlashtiring.

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

Punktir ulovchi chiziqni ko‘rsatish uchun elementga line-style="dashed"’ni belgilang — noaniq yoki kutilayotgan hodisalar uchun foydali.

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

Alohida nuqtalarga istalgan rang berish uchun color prop’idan foydalaning.

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 (standart) va lg o‘lchamlarida mavjud.

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

Kontentni timeline’ning o‘ng tomoniga joylashtirish uchun mode="right"’ni belgilang.

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

Elementlarni chap va o‘ngga almashtirib chiqarish uchun mode="alternate"’ni belgilang.

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

Oxirida loading spinnerini ko‘rsatish uchun pending’ni qo‘shing — bu yana yangi hodisalar bo‘lishini bildiradi.

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

Hodisalarni teskari tartibda (eng yangisi birinchi) ko‘rsatish uchun reverse’ni qo‘shing.

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

Har bir element kontentini to‘liq moslashtirish uchun title va description’dan prop yoki slot sifatida foydalaning. title va description slotlari orqali timeline ichiga istalgan markup’ni — teglar, avatarlar, linklar, tugmalar — qo‘yishingiz mumkin.

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'`	Layout yo‘nalishi va kontent joylashuvi
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Nuqta va matn o‘lchami
`pending`	`boolean`	`false`	Oxirida loading spinnerini ko‘rsatish
`pendingText`	`string`	`''`	Pending spinneri yonidagi matn
`reverse`	`boolean`	`false`	Element tartibini teskari qilish
`numbered`	`boolean`	`false`	Nuqtalar ichida qadam raqamlarini (01, 02...) ko‘rsatish
`animated`	`boolean`	`false`	Bosqichma-bosqich kirish animatsiyalarini yoqish
`connectedCards`	`boolean`	`false`	Barcha elementlarni ko‘tarilgan karta sifatida renderlash

VxTimelineItem Props

Prop	Type	Default	Description
`type`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Nuqta rang turi
`color`	`string`	—	Nuqta uchun maxsus rang (`type`dan ustun)
`title`	`string`	—	Hodisa sarlavhasi (`label` uchun alias)
`label`	`string`	—	Hodisa sarlavhasi (`title` uchun alias)
`description`	`string`	—	Hodisa asosiy matni
`timestamp`	`string`	—	Vaqt yoki sana matni
`hollow`	`boolean`	`false`	Konturli nuqta uslubi
`lineStyle`	`'solid' \| 'dashed'`	`'solid'`	Ulovchi chiziq uslubi
`clickable`	`boolean`	`false`	Click interaksiyasini va hover effektini yoqish
`collapsible`	`boolean`	`false`	Sarlavha bosilganda matnni ochib-yopib turish
`defaultExpanded`	`boolean`	`true`	Dastlabki ochiq holat (`collapsible` yoqilganda)
`card`	`boolean`	`false`	Ushbu elementni ko‘tarilgan karta sifatida renderlash
`loading`	`boolean`	`false`	Shimmerli skelet placeholder’ini ko‘rsatish
`progress`	`number`	—	Chiziqni qisman to‘ldirish (0–100)
`gradientColor`	`string`	—	Ulovchi chiziq uchun gradient yakuniy rangi
`expandable`	`boolean`	`false`	Matnni "Show more" tugmasi bilan qisqartirish
`maxLines`	`number`	`3`	`expandable` yoqilganda maksimal ko‘rinadigan qatorlar

VxTimelineItem Events

Event	Payload	Description
`click`	`MouseEvent`	Bosiladigan element bosilganda emit qilinadi

VxTimelineItem Slots

Slot	Description
`default`	Hodisa matn kontenti (`description` slotining fallbacki)
`title`	Maxsus sarlavha markupi (`title`/`label` propi o‘rniga)
`label`	`title` slotining aliasi
`description`	Maxsus matn markupi (`description` propi va default slot o‘rniga)
`dot`	Maxsus nuqta elementi (butun nuqta doirasi o‘rniga)
`icon`	Nuqta doirasi ichiga renderlanadigan ikon kontenti
`timestamp`	Vaqt belgisini moslashtirish

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