修改antdesign垂直时间线为水平时间线

Question

我需要在我正在使用的基于 React 的应用程序中绘制水平时间轴 antdesign as UI library. According to docs, antdesign timeline component 在这方面是很好的资源，但不幸的是它显然只支持垂直时间轴。在继续寻找其他一些开源水平时间线或自己编写时间线之前，我想在这里问一下是否有任何方法可以将该垂直时间线转换为水平时间线。这是我用来做一些更改以获得所需结果但没有取得任何成功的代码片段：

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);

Answer 1

我会改用 <Steps> 组件，它看起来相似但支持 vertical/horizontal。

修改antdesign垂直时间线为水平时间线

Modifying antdesign vertical timeline into horizontal timeline

javascript

reactjs

antd