- Adding content
- Adding opposite content
- Dot item
- Disabling items
- CSS class
Contact Support
Items in React Timeline component
28 Feb 202524 minutes to read
The Timeline items can be added by using the ItemDirective
tag. Each item can be configured with options such as content
, oppositeContent
, dotCss
, disabled
and cssClass
.
Adding content
You can define the item content using the content property.
String content
You can define string content for the Timeline items.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Shipped' />
<ItemDirective content='Departed' />
<ItemDirective content='Arrived' />
<ItemDirective content='Out for Delivery' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Shipped' />
<ItemDirective content='Departed' />
<ItemDirective content='Arrived' />
<ItemDirective content='Out for Delivery' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Templated content
You can specify the template content for the items, by using the selector for an element in HTML.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
const templateContents = [
{ title: 'Shipped', description: 'Package details received', info: '- Awaiting dispatch' },
{ title: 'Departed', description: 'In-transit', info: '(International warehouse)' },
{ title: 'Arrived', description: 'Package arrived at nearest hub', info: '(New york - US)' }
];
const contentTemplate = (data) => (
<div className="content-container">
<div className="title">
{data.title}
</div>
<span className="description">
{data.description}
</span>
<div className="info">
{data.info}
</div>
</div>
);
return (
<div className="container" style={{ height: '330px', marginTop: '30px' }}>
<TimelineComponent id="timeline">
<ItemsDirective>
{templateContents.map((item, index) => (
<ItemDirective key={index} content={() => contentTemplate(item)}/>
))}
<ItemDirective content="Out for Delivery" />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
const templateContents = [
{ title: 'Shipped', description: 'Package details received', info: '- Awaiting dispatch' },
{ title: 'Departed', description: 'In-transit', info: '(International warehouse)' },
{ title: 'Arrived', description: 'Package arrived at nearest hub', info: '(New york - US)' }
];
const contentTemplate = (data: any) => (
<div className="content-container">
<div className="title">
{data.title}
</div>
<span className="description">
{data.description}
</span>
<div className="info">
{data.info}
</div>
</div>
);
return (
<div className="container" style={{ height: '330px', marginTop: '30px' }}>
<TimelineComponent id="timeline">
<ItemsDirective>
{templateContents.map((item, index) => (
<ItemDirective key={index} content={() => contentTemplate(item)}/>
))}
<ItemDirective content="Out for Delivery" />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.content-container {
position: relative;
width: 180px;
padding: 10px;
margin-left: 5px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
background-color: ghostwhite;
}
.content-container::before {
content: '';
position: absolute;
left: -8px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 8px solid silver;
}
.content-container .title {
font-size: 16px;
}
.content-container .description {
color: #999999;
font-size: 12px;
}
.content-container .info {
color: #999999;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Adding opposite content
You can add additional information to each Timeline item, by using the oppositeContent property which is positioned opposite to the item content.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Breakfast' oppositeContent='8:00 AM' />
<ItemDirective content='Lunch' oppositeContent='1:00 PM' />
<ItemDirective content='Dinner' oppositeContent='8:00 PM' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Breakfast' oppositeContent='8:00 AM' />
<ItemDirective content='Lunch' oppositeContent='1:00 PM' />
<ItemDirective content='Dinner' oppositeContent='8:00 PM' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Dot item
You can define CSS class to set icons, background colors, or images to personalize the appearance of dots associated with each Timeline item by using the dotCss property.
Adding icons
You can define the CSS class to show the icon for each item using the dotCss
property.
Adding images
You can include images for the Timeline items using the dotCss
property, by setting the CSS background-image
property.
Adding text
You can display text for the Timeline items using the dotCss
property, by adding text to the CSS content
property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Default' />
<ItemDirective content='Icon' dotCss='e-icons e-check' />
<ItemDirective content='Image' dotCss='custom-image' />
<ItemDirective content='Text' dotCss='custom-text' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Default' />
<ItemDirective content='Icon' dotCss='e-icons e-check' />
<ItemDirective content='Image' dotCss='custom-image' />
<ItemDirective content='Text' dotCss='custom-text' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-dot.custom-image {
background-image: url(https://ej2.syncfusion.com/demos/src/listview/images/margaret.png);
}
.e-dot.custom-text::before {
content: 'A';
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Disabling items
You can use the disabled property to disable an item when set to true
. By default, the value is false
.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Eat' />
<ItemDirective content='Code' />
<ItemDirective content='Repeat' disabled={true} />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent>
<ItemsDirective>
<ItemDirective content='Eat' />
<ItemDirective content='Code' />
<ItemDirective content='Repeat' disabled={true} />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
CSS class
You can customize the appearance of the Timeline item by specifying a custom CSS class using the cssClass property.