Alignment in React Timeline component

27 Dec 202421 minutes to read

You can display the Timeline content Before, After, Alternate and AlternateReverse by using the align property. The oppositeContent will be displayed parallel to the content when configured in the ItemDirective.

Before

In Before alignment, for horizontal orientation the item content is placed at the top and oppositeContent at the bottom whereas in vertical, the content to the left and oppositeContent to the right.

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 align='Before'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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 align='Before'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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>

After

In After alignment, for horizontal orientation the item content is placed at the bottom and oppositeContent at the top whereas in vertical, the content to the right and oppositeContent to the left.

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 align='After'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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 align='After'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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>

Alternate

In Alternate alignment, the item content are arranged alternatively regardless of the Timeline 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 align='Alternate'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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 align='Alternate'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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>

Alternate reverse

In AlternateReverse alignment, the item content are arranged in reverse alternate regardless of the Timeline 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 align='Alternatereverse'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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 align='Alternatereverse'>
                <ItemsDirective>
                    <ItemDirective content='ReactJs' oppositeContent='Owned by Facebook'  />
                    <ItemDirective content='Angular' oppositeContent='Owned by Google'  />
                    <ItemDirective content='VueJs' oppositeContent='Owned by Evan you'  />
                    <ItemDirective content='Svelte' oppositeContent='Owned by Rich Harris' />
                </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>