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

时间:2017-04-13 14:15:30

标签: javascript reactjs antd

我需要在基于React的应用程序中绘制水平时间轴,我将antdesign用作UI库。根据文件,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);

1 个答案:

答案 0 :(得分:3)

我会使用<Steps>组件,它看起来相似但支持垂直/水平。