Orientations in React Timeline component
7 Oct 202510 minutes to read
The Timeline component supports displaying items in both horizontal and vertical directions using the orientation property. This flexibility allows you to choose the most suitable layout based on your application’s design requirements and available space.
Vertical
Display timeline items vertically in a top-to-bottom sequence by setting the orientation property to Vertical. By default, the items are displayed in vertical orientation.
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 orientation='Vertical'>
<ItemsDirective>
<ItemDirective content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<ItemDirective content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<ItemDirective content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<ItemDirective content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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 orientation='Vertical'>
<ItemsDirective>
<ItemDirective content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<ItemDirective content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<ItemDirective content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<ItemDirective content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/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>Horizontal
Display timeline items horizontally in a left-to-right sequence by setting the orientation property to Horizontal. The horizontal layout works particularly well on desktop screens and wide containers.
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'>
<TimelineComponent orientation='Horizontal'>
<ItemsDirective>
<ItemDirective content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<ItemDirective content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<ItemDirective content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<ItemDirective content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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'>
<TimelineComponent orientation='Horizontal'>
<ItemsDirective>
<ItemDirective content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<ItemDirective content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<ItemDirective content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<ItemDirective content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/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: 50px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>