横断タイムラインにantdesign垂直タイムラインを変更する

Question

antdesignをUIライブラリとして使用しているReactベースのアプリで水平タイムラインを描画する必要があります。ドキュメントによると、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>コンポーネントを使用することになり、似ていますが、水平/垂直サポートしています。ここで私が望む結果を得るためにいくつかの変更を行うために使用されるが、任意の成功を取得していないコードスニペットです。