lara-light-indigo

Timeline

Timeline visualizes a series of chained events.

Left Align
Ordered
Processing
Shipped
Delivered
Right Align
Ordered
Processing
Shipped
Delivered
Alternate Align
Ordered
Processing
Shipped
Delivered
Opposite Content
Ordered
15/10/2020 10:30
Processing
15/10/2020 14:00
Shipped
15/10/2020 16:15
Delivered
16/10/2020 10:00
Customized
Ordered
15/10/2020 10:30

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Processing
15/10/2020 14:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Shipped
15/10/2020 16:15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Delivered
16/10/2020 10:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Horizontal
Top Align
2020
2021
2022
2023
Bottom Align
2020
2021
2022
2023
Alternate Align
 
2020
 
2021
 
2022
 
2023
Import via Module

import { Timeline } from 'primereact/timeline';
 
Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/timeline/timeline.min.js"></script>
 
Getting Started

Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content property is required to display the representation of an event. Example below is a sample events array that is used throughout the documentation.


const events = [
    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
];
 

<Timeline value={events} content={(item) => item.status} />
 
Layout

Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally.


<Timeline value={events} layout="horizontal" content={(item) => item.status} />
 
Alignment

Location of the timeline bar is defined using the align property.


<Timeline value={events} align="right" content={(item) => item.status} />
 

In addition, the "alternate" alignment option make the contents take turns around the timeline bar.


<Timeline value={events} align="alternate" content={(item) => item.status} />
 
Opposite

Content to be placed at the other side of the bar is defined with the opposite property.


<Timeline value={events} opposite={(item) => item.status} content={(item) => <small className="p-text-secondary">{item.date}</small>} />
 
Custom Markers

marker property allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.


<Timeline value={events} marker={(item) => <i className={item.icon}></i>} content={(item) => item.status}} />
 
Properties
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of events to display.
alignstringleftPosition of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.
layoutstringverticalOrientation of the timeline, valid values are "vertical" and "horizontal".
dataKeystringnullName of the field that uniquely identifies the a record in the data.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
Styling

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-timelineContainer element.
p-timeline-leftContainer element when alignment is left.
p-timeline-rightContainer element when alignment is right.
p-timeline-topContainer element when alignment is top.
p-timeline-bottomContainer element when alignment is bottom.
p-timeline-alternateContainer element when alignment is alternating.
p-timeline-verticalContainer element of a vertical timeline.
p-timeline-horizontalContainer element of a horizontal timeline.
p-timeline-eventEvent element.
p-timeline-event-oppositeOpposite of an event content.
p-timeline-event-contentEvent content.
p-timeline-event-separatorSeparator element of an event.
p-timeline-event-markerMarker element of an event.
p-timeline-event-connectorConnector element of an event.
Dependencies

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma