Timeline

Timeline displays events in chronological order. Supports horizontal, vertical, and colored connectors.

const { default: Timeline } = await import('/components/data-display/timeline.js');

const { tags, $ } = Lightview;

const events = [
    { date: '2020', title: 'Project Started', done: true },
    { date: '2021', title: 'First Release', done: true },
    { date: '2022', title: 'V2 Launch', done: true },
    { date: '2023', title: 'Enterprise', done: false }
];

const timeline = Timeline({},
    ...events.map((e, i) => 
        Timeline.Item({ first: i === 0, last: i === events.length - 1 },
            Timeline.Start({}, e.date),
            Timeline.Middle({ done: e.done }),
            Timeline.End({ box: true }, e.title),
            i < events.length - 1 ? Timeline.Hr({ done: e.done }) : null
        )
    )
);

$('#demo').insert(timeline);

const { default: Timeline } = await import('/components/data-display/timeline.js');

const { tags, $ } = Lightview;

const steps = [
    { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
    { title: 'Processing', desc: 'Dec 11, 2023', done: true },
    { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
    { title: 'Delivered', desc: 'Expected Dec 15', done: false }
];

const timeline = Timeline({ vertical: true },
    ...steps.map((s, i) => 
        Timeline.Item({ first: i === 0, last: i === steps.length - 1 },
            Timeline.Start({ box: true }, s.title),
            Timeline.Middle({ done: s.done, color: s.done ? 'primary' : undefined }),
            Timeline.End({}, s.desc),
            i < steps.length - 1 ? Timeline.Hr({ done: steps[i+1].done, color: s.done ? 'primary' : undefined }) : null
        )
    )
);

$('#demo').insert(timeline);

Timeline Props

Sub-components

Interactive Demo

• 1984
  First Macintosh

  ---

• ---

  1998
  iMac

  ---

• ---

  2007
  iPhone