Timeline

Vertical display timeline.

Import

import { Timeline } from 'rsuite';

Examples

Basic

16:27:41 Your order starts processing
16:28:43 Your order to be ready for delivery
16:28:45 Your parcel has been out of the library
02:34:41 Send to Shanghai Hongkou Company
15:05:29 Sending you a piece

Custom active item

By default the last Timeline.Item is marked as active (with a blue dot). You could change this behavior by providing a function for isItemActive prop.

Two preset values are provided for convenience.

Timeline.ACTIVE_FIRST Mark the first item as active
Timeline.ACTIVE_LAST Mark the last item as active (the default behavior)

First item
Second item
Third item

First item
Second item
Third item

First item
Second item
Third item

Custom alignment

2018-03-01
Your order starts processing
2018-03-02
Order out of stock
2018-03-10
Arrival
2018-03-12
Order out of the library
2018-03-15
Sending you a piece

2018-03-01
Your order starts processing
2018-03-02
Order out of stock
2018-03-10
Arrival
2018-03-12
Order out of the library
2018-03-15
Sending you a piece

2018-03-01
Your order starts processing
2018-03-02
Order out of stock
2018-03-10
Arrival
2018-03-12
Order out of the library
2018-03-15
Sending you a piece

Custom time

November 5, 2019 16:27
Your order starts processing
November 5, 2019 18:00
Your order to be ready for delivery
Yesterday 16:28
Your parcel has been out of the library
Today 02:34
Send to Shanghai Hongkou Company
Today 15:05
Sending you a piece

November 5, 2019 16:27
Your order starts processing
November 5, 2019 18:00
Your order to be ready for delivery
Yesterday 16:28
Your parcel has been out of the library
Today 02:34
Send to Shanghai Hongkou Company
Today 15:05
Sending you a piece

November 5, 2019 16:27
Your order starts processing
November 5, 2019 18:00
Your order to be ready for delivery
Yesterday 16:28
Your parcel has been out of the library
Today 02:34
Send to Shanghai Hongkou Company
Today 15:05
Sending you a piece

Endless

16:27:41 Your order starts processing
16:28:43 Your order to be ready for delivery
16:28:45 Your parcel has been out of the library
02:34:41 Send to Shanghai Hongkou Company
15:05:29 Sending you a piece

Custom Icon

March 1, 10:20
Your order starts processing
March 1, 11:34
The package really waits for the company to pick up the goods
March 1, 16:20
[Packed]
Beijing company has received the shipment
March 2, 06:12
[In transit]
Order has been shipped from Beijing to Shanghai
March 2, 09:20
[In transit]
Sended from the Shanghai Container Center to the distribution center
March 3, 14:20
[Delivery]
Shanghai Hongkou District Company Deliverer: Mr. Li, currently sending you a shipment
March 3, 17:50
[Received]]
Your courier has arrived and the signer is the front desk

Props

`<Timeline>`

Property	Type `(Default)`	Description
align	'left' \| 'right' \| 'alternate' `('left')`	Timeline content alignment
as	ElementType `('ul')`	You can use a custom element type for this component
children *	Timeline.Item[]	The content of the component
classPrefix	string `('timeline')`	The prefix of the component CSS class
endless	boolean	Timeline endless
isItemActive	(index: number, totalItemsCount: number) => boolean	Determine whether an item should be marked as active

`<Timeline.Item>`

Property	Type `(Default)`	Description
children *	ReactNode	The content of the component
classPrefix	string `('timeline-item')`	The prefix of the component CSS class
as	ElementType `('li')`	You can use a custom element type for this component
dot	ReactNode	Customizing the Timeline item
time	ReactNode	Customizing the Timeline time