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

我需要在基于React的应用程序中绘制水平时间线，因此我使用antdesign作为UI库。根据文档，antdesign timeline component在这方面是很好的资源，但不幸的是，它显然只支持垂直时间轴。在继续寻找其他开源水平时间轴或自己编写时间轴之前，我想问问这里是否有任何方法将垂直时间轴转换为水平时间轴。下面是我用来做一些改变来获得理想的结果，但没有得到任何成功的代码片段：将antdesign垂直时间线修改为水平时间线

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

来源

2017-04-13 adi

我会用<Steps>组件，而不是，它看起来类似，但支持垂直/水平。

来源

2017-04-21 13:38:11

虽然这看起来并不是最适合的解决方案，但现在几乎是最好的解决方案，因为在这种情况下，没有针对antdesign中的水平时间轴的重点支持，在这种情况下''组件解决了这个问题。如果是复杂的时间表，它可能不起作用，但通过编写一些自定义css来达到基本目的。 – adi

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

回答

相关问题