Skip to main content
The Timeline.vue component is a dynamic, event-driven timeline that allows users to navigate through a sequence of events. Events are displayed in a paginated format, and users can jump to specific dates or move to newer or older events.

​
Features

Dynamic Event Rendering

Displays a subset of events based on pagination, allowing users to browse through a large event list efficiently.

Navigation Controls

Includes buttons to navigate between the newest, newer, older, or oldest events, providing a smooth browsing experience.

Date Selection

Allows users to jump to a specific date using a dropdown selector, enabling quick access to events from a particular day.

Customizable Appearance

Supports custom dot styles for each event, allowing for personalized and visually distinct timeline entries.

​
Usage

​
Basic Example

<template>
  <Timeline
    :events="eventsData.events"
    :page-length="3"
    dot-classes="bg-blue-500 rounded-full w-4 h-4"
    :format="{
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    }"
  >
    <template #default="{ event: event }">
      <b>{{ event.title }}</b>
    </template>
  </Timeline>
</template>

<script setup>
import { reactive } from 'vue';
import { Timeline } from '@robojuice/velure-ui';

const eventsData = reactive({
  events: [
    { id: 1, title: 'Event 1', datetime: '2024-11-20T10:00:00Z', description: 'Description for event 1' },
    { id: 2, title: 'Event 2', datetime: '2024-11-21T12:00:00Z', description: 'Description for event 2' },
    { id: 3, title: 'Event 3', datetime: '2024-11-22T14:00:00Z', description: 'Description for event 3' },
    { id: 4, title: 'Event 4', datetime: '2024-11-23T16:00:00Z', description: 'Description for event 4' },
    { id: 5, title: 'Event 5', datetime: '2024-11-24T18:00:00Z', description: 'Description for event 5' },
  ],
});
</script>

​
Props

​
events
array
default:"[]"
Array of event objects, each containing id, title, datetime, and description.
​
dotClasses
string
default:"''"
Custom CSS classes for the event dots.
​
pageLength
number
default:"5"
Number of events displayed per page.
​
format
object
Default value: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }. Formatting options for event dates using Date.toLocaleDateString().

​
Example Use Cases

​
Timeline with Custom Dot Style

<Timeline
  :events="eventsData.events"
  dot-classes="bg-green-500 rounded-full w-4 h-4"
  :page-length="3"
>
  <template #default="{ event }">
    <div>
      <b>{{ event.title }}</b>
      <p>{{ event.description }}</p>
    </div>
  </template>
</Timeline>

​
Date-Specific Navigation

<Timeline
  :events="eventsData.events"
  :page-length="5"
  :format="{ weekday: 'short', month: 'short', day: '2-digit' }"
>
  <template #default="{ event }">
    <div>
      <b>{{ event.title }}</b>
      <small>{{ event.datetime }}</small>
    </div>
  </template>
</Timeline>

​
Notes

  • Pagination: Use the pageLength prop to control the number of events displayed at a time.
  • Custom Event Rendering: Leverage the default scoped slot to fully customize the display of events.
  • Dot Customization: Use the dotClasses prop to style the dots marking each event in the timeline.
For further customization, refer to the component’s source code.