Procredit

Components

Timeline

Vertical display timeline

When to use

When a series of information needs to be ordered by time (ascending or descending).
When you need a timeline to make a visual connection.

Basic

Basic timeline

Create a services site 25 Jul 2012 at 14:30
Solve initial network problems 25 Jul 2012 at 15:45
Technical testing 25 Jul 2012 at 18:03
Network problems being solved 25 Jul 2012 at 21:30

Color

Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.

Create a services site 25 Jul 2012 at 14:30
Solve initial network problems 25 Jul 2012 at 15:45
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3
Technical testing 1
Technical testing 2
Technical testing 3
Technical testing 1
Technical testing 2
Technical testing 3

When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. reverse={true} is used for reversing nodes.

Create a services site 25 Jul 2012 at 14:30
Solve initial network problems 25 Jul 2012 at 15:45
Technical testing 25 Jul 2012 at 18:03
Recording...

Alternate

Alternate timeline.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Note related to current event
Network problems being solved 2015-09-01
Create a services site 2015-09-01

Custom

Set a node as an icon or other custom element.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved

Right alternate

Right alternate timeline.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Label

Use label show time alone.

LeftAlternateRight

2015-09-01
Create a services site 2015-09-01
2015-09-02
Solve initial network problems 2015-09-01
2015-09-02
Technical testing 2015-09-01
2015-09-03
Network problems being solved 2015-09-01

API