Timeline

The TkTimeline is a component that displays a vertical or horizontal timeline of events. The TkTimelineItem is a helper component used to create customized content within the TkTimeline component.

React

import { TkTimeline, TkTimelineItem } from '@takeoff-ui/react'

Vue

import { TkTimeline, TkTimelineItem } from '@takeoff-ui/vue'

Angular

import { TkTimeline, TkTimelineItem } from '@takeoff-ui/angular'

Basic

This demo visualizes the items to display on the timeline. Each object should have at least a title. description and date are optional.

View Code

React

<TkTimeline items={items} />

Vue

<TkTimeline :items.prop="items" />

Angular

<tk-timeline [items]="items" />

Orientation

This example illustrates the orientation of the timeline.

View Code

React

<TkTimeline items={items} />
<TkTimeline items={items} orientation="vertical" />

Vue

<TkTimeline :items.prop="items" />
<TkTimeline :items.prop="items" orientation="vertical" />

Angular

<tk-timeline [items]="items" />
<tk-timeline [items]="items" orientation="vertical" />

Alternate

This example illustrates whether to alternate the position of timeline items relative to the line.

View Code

React

<TkTimeline items={items} />
<TkTimeline items={items} alternate={false} />

Vue

<TkTimeline items.prop="items" />
<TkTimeline :items.prop="items" :alternate="false"/>

Angular

<tk-timeline [items]="items" />
<tk-timeline [items]="items" [alternate]="false" />

Customization

TkTimelineItem is a helper component used to create customized content within the TkTimeline component. It's used to add HTML, images, buttons, or any custom content when the standard timeline item structure (title, description, date) isn't sufficient.

Custom Title

Custom description with HTML and Image.

Important

Another custom timeline item

Yet Another Item

This is yet another custom timeline item with more content.

Final Item

This is the final custom timeline item.

View Code

React

  <TkTimeline orientation="vertical">
    <TkTimelineItem>
      <div className="custom-content">
        <h3 className="text-black-700">Custom Title</h3>
        <p>
          Custom description with <strong>HTML</strong>
        </p>
        <img
          src="https://flagpedia.net/data/flags/h24/tr.webp"
          alt="Custom image"
        />
      </div>
    </TkTimelineItem> 
  <TkTimeline />

Vue

  <TkTimeline>
    <TkTimelineItem>
      <div class="custom-content">
        <h3 class="text-black-700">Custom Title</h3>
        <p>
          Custom description with <strong>HTML</strong>
        </p>
        <img
          src="https://flagpedia.net/data/flags/h24/tr.webp"
          alt="Custom image"
        />
      </div>
    </TkTimelineItem>
  </TkTimeline>
  

Angular

  <tk-timeline>
    <tk-timeline-item>
      <div class="custom-content">
        <h3 class="text-black-700">Custom Title</h3>
        <p>
          Custom description with <strong>HTML</strong>
        </p>
        <img
          src="https://flagpedia.net/data/flags/h24/tr.webp"
          alt="Custom image"
        />
      </div>
    </tk-timeline-item>
  </tk-timeline>
  

API

Props

Name	Type	Default	Description
	boolean	true	Whether to alternate the position of timeline items relative to the line.
	TimelineItem[]	[]	An array of objects representing the items to display on the timeline. Each object should have at least a title. description and date are optional.
	"horizontal", "vertical"	'horizontal'	The orientation of the timeline.

Interfaces

TimelineItem

interface TimelineItem {
  title: string;
  description?: string;
  date?: string;
}