Timeline

Vertical sequence of events with title, text and time. The size prop (xs, sm, md, lg, xl) sets the dot, font size and spacing.

Jump to API reference

Import

Vue

import { UiTimeline } from '@ziyarago/ui/vue'

Trip progress

Booking confirmedPayment received10:02

Visa issuedSent to the pilgrim by email12:30

Check-in openedTomorrow

Vue

<UiTimeline
  :items="[{ title: 'Booking confirmed', text: 'Payment received', time: '10:02' }, { title: 'Visa issued', text: 'Sent to the pilgrim by email', time: '12:30' }, { title: 'Check-in opened', time: 'Tomorrow' }]"
 />

Sizes

Booking confirmedPayment received10:02

Visa issued12:30

Booking confirmedPayment received10:02

Visa issued12:30

Booking confirmedPayment received10:02

Visa issued12:30

Booking confirmedPayment received10:02

Visa issued12:30

Booking confirmedPayment received10:02

Visa issued12:30

Vue

<UiTimeline
  :items="[{ title: 'Booking confirmed', text: 'Payment received', time: '10:02' }, { title: 'Visa issued', time: '12:30' }]"
  size="xs"
 />

<UiTimeline
  :items="[{ title: 'Booking confirmed', text: 'Payment received', time: '10:02' }, { title: 'Visa issued', time: '12:30' }]"
  size="sm"
 />

<UiTimeline
  :items="[{ title: 'Booking confirmed', text: 'Payment received', time: '10:02' }, { title: 'Visa issued', time: '12:30' }]"
  size="md"
 />

<UiTimeline
  :items="[{ title: 'Booking confirmed', text: 'Payment received', time: '10:02' }, { title: 'Visa issued', time: '12:30' }]"
  size="lg"
 />

<UiTimeline
  :items="[{ title: 'Booking confirmed', text: 'Payment received', time: '10:02' }, { title: 'Visa issued', time: '12:30' }]"
  size="xl"
 />

API reference

Vertical list of events connected by a line, for activity history and status progress.

Props

PropType and valuesDefaultDescription

itemsrequired{ title: string; text?: string; time: string }[][]Events from top to bottom. title is bold, text is optional detail, time is the caption.

sizexssmmdlgxl'md'Dot, spacing and font size.