Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modifying antdesign vertical timeline into horizontal timeline

I need to draw horizontal timeline in my React based app for which I am using antdesign as UI library. According to docs, antdesign timeline component is great resource in this regard but unfortunately it apparently supports vertical timeline only. Before moving on to looking for some other open source horizontal timelines or coding the timeline myself, I thought to ask here if there's any way to convert that vertical timeline into horizontal timeline. Here's the code snippet that I used to do some changes to get the desired results but didn't get any success:

import { Timeline } from 'antd';

ReactDOM.render(
  <Timeline>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="red">
      <p>Solve initial network problems 1</p>
      <p>Solve initial network problems 2</p>
      <p>Solve initial network problems 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item>
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
  </Timeline>
, mountNode);
like image 755
Adil Avatar asked Sep 15 '25 08:09

Adil


1 Answers

I would use the <Steps> component instead, which looks similar but supports vertical/horizontal.

like image 129
Jesper We Avatar answered Sep 17 '25 22:09

Jesper We