Flip Layout
The flipLayout
prop provides the ability to reverse the orientation of the timeline in VERTICAL
and VERTICAL_ALTERNATING
modes. This is particularly useful for right-to-left (RTL) language support or when a reversed chronological display is preferred.
By default, timelines are rendered left-to-right (or top-to-bottom for vertical modes). Enabling flipLayout
reverses this orientation.
Usage
To flip the timeline layout, add the flipLayout
boolean prop to the <Chrono>
component and set it to true
.
import React from 'react';
import { Chrono } from 'react-chrono';
const events = [
{
title: 'Event 1',
cardTitle: 'First Event',
// other event data
},
{
title: 'Event 2',
cardTitle: 'Second Event',
},
{
title: 'Event 3',
cardTitle: 'Third Event',
},
];
function FlippedTimeline() {
return (
<Chrono
items={events}
mode="VERTICAL" // Or VERTICAL_ALTERNATING
flipLayout={true} // Enable flipped layout
/>
);
}
export default FlippedTimeline;
When flipLayout
is true
:
- In
VERTICAL
mode, the timeline content (cards) will appear on the right side of the timeline bar (or left, if it was originally right). - In
VERTICAL_ALTERNATING
mode, the alternating pattern will be mirrored. For example, if cards normally start on the left, they will start on the right.
Visual Examples
Vertical Mode Flipped
In VERTICAL
mode, if the cards are typically on the left of the central line, flipLayout
will move them to the right.
Vertical Alternating Mode Flipped
In VERTICAL_ALTERNATING
mode, the sequence of card placement is reversed. If the first card is usually on the left, flipLayout
will place it on the right, and subsequent cards will alternate accordingly.
The flipLayout
prop offers a simple way to adapt the timeline's visual flow to different layout requirements or preferences.