- Before
- After
- Alternate
- Alternate reverse
Contact Support
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>