Orientations in React Timeline component

27 Dec 202410 minutes to read

The Timeline component supports the display of items in both horizontal and vertical direction by using the orientation property.

Vertical

You can display the items one below the other vertically 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/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>

Horizontal

In horizontal orientation, the items are displayed in a side-by-side manner by setting the orientation property to Horizontal.

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/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: 50px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>