介绍
react-zeitline 是一款 React 组件库，它提供了一种美观且易于理解的时间轴布局，可以用来展示时间节点、事件流等信息。
安装
你可以使用 npm 或者 yarn 进行安装：
npm install react-zeitline
yarn add react-zeitline
使用方法
使用 react-zeitline 的基本方法是将组件引入到你的 React 代码中，然后进行配置。我们首先需要引入组件：
import Zeitline from 'react-zeitline';
接下来，我们可以在 JSX 中使用 Zeitline 组件，例如：
<Zeitline>
{/* 在这里添加 Zeitline.Item 组件 */}
</Zeitline>注意，我们需要在 Zeitline 组件内部添加 Zeitline.Item 子组件，以便实现时间轴节点的展示。
配置项
react-zeitline 提供了多种配置项，可以用来自定义时间轴的样式、设置不同节点的展示方式等。下面是一些常见的配置项：
direction
设置时间轴的方向。取值可以是 'vertical'（垂直） 或者 'horizontal'（水平）。默认值是 'vertical'。
<Zeitline direction="horizontal">
{/* 节点将按水平方向展示 */}
</Zeitline>align
设置节点的对齐方式。取值可以是 'left'（左对齐）、'right'（右对齐） 或者 'alternate'（相间排列）。默认值是 'alternate'。
<Zeitline align="left">
{/* 节点将左对齐展示 */}
</Zeitline>lineStyle
设置时间轴的样式，包括线条的宽度、颜色、图案等。
<Zeitline lineStyle={{ width: 5, color: 'red', borderStyle: 'dashed' }}>
{/* 时间轴的线条将有 5 px 宽度，颜色为红色，边线样式为虚线 */}
</Zeitline>itemStyle
设置时间节点的样式，包括图标、颜色等。
<Zeitline.Item itemStyle={{ backgroundColor: 'green', icon: 'lightbulb' }}>
{/* 时间节点将以绿色背景色展示，并带有灯泡图标 */}
</Zeitline.Item>示例代码
下面是一个简单的例子，它展示了如何使用 react-zeitline 来创建一个时间轴布局并添加一些节点：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------------
-------- ----------------- -
------ -
--------- -------------
---------------
-------------
-------- -------- - ---------------
----------------
---------------
-------------
-------- ---------------------
----------------
---------------
-------------
-----------------------
----------------
-----------
--
-
------ ------- ----------------在上面的例子中，我们创建了一个垂直方向的时间轴布局，并添加了三个节点，每个节点都包含了年份和描述信息。我们还使用了 align 属性将节点左对齐展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de162