介绍 react-chrono,一个为 React 构建的灵活时间线组件。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sGTUFxgl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/g3i40kmmhbncabzvadgh.png)

分叉此存储库

演示

prabhuignoto/react-chrono

用于 React 的现代时间轴组件

特点

✅ 模式 - 以三种独特的模式horizontal、vertical或tree渲染时间线。

✅ 树 - 使用Tree模式以树状方式垂直布局时间线卡片。

✅ 幻灯片 - 以slideshow模式自动播放时间线。

✅ 键盘支持 - 在vertical或tree模式下使用向上、向下键导航时间线。在horizontal模式 LEFT 中,可以使用 RIGHT 键。

✅ 自定义主题 - 使用theme道具自定义颜色

安装

yarn install react-chrono

进入全屏模式 退出全屏模式

🚀 开始

请确保将组件包装在具有width和height的容器中。当未指定mode时,组件默认为HORIZONTAL模式。

使用items道具创建时间线。每个时间线项目具有以下属性。

title、contentTitle、contentText、contentDetailedText

这是一个具有最少设置的示例时间线。

  const items = [{
    title: "May 1940",
    contentTitle: "Dunkirk",
    contentText:"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
    contentDetailedText: "On 10 May 1940, Hitler began his long-awaited offensive in the west...",
  }, ...];

  <div style={{ width: "500px", height: "400px" }}>
    <chrono items={items} />
  </div>

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sGTUFxgl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/g3i40kmmhbncabzvadgh.png)

垂直

要垂直渲染时间线,请使用VERTICAL模式

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="VERTICAL"
    />
  </div>

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--pY3Wnqjm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/vupx8hqds7skb4kjvec2.png)

树

在Tree模式下,时间线垂直渲染,卡片在左右两侧交替。

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="TREE"
    />
  </div>

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--YrUtBPnc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/dzvozf43ywfbwu5aetgq.png)

幻灯片

使用slideShow模式自动播放时间线。

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      slideShow
    />
  </div>

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--oG6rhlYT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/5gvptdl8oymyv0fizd90.gif)

在 CodeSandbox 上试用!

道具

姓名

描述

默认

模式

设置时间线组件的布局。可以是HORIZONTAL、VERTICAL或TREE

HORIZONTAL

项目

时间线项目的集合

[]

禁用NavOnKey

禁用键盘导航

错误的

幻灯片放映

以幻灯片模式启动时间线

错误的

slideItemDuration

slideshow模式下时间线点在ms中的延迟量

2500

标题位置

设置标题在HORIZONTAL模式下的位置。可以是TOP或BOTTOM

TOP

项目宽度

HORIZONTAL模式下时间线部分的宽度

320

模式

react-chrono支持三种模式HORIZONTAL、VERTICAL和TREE。mode 属性可用于定义卡片的方向。

键盘导航和禁用它

默认情况下,时间线可以通过键盘导航。

• 对于HORIZONTAL模式,使用左箭头键进行导航。

• 对于VERTICAL或TREE模式,时间线可以通过 UP DOWN 箭头键导航。

• 要轻松跳转到时间线中的第一项或最后一项,请使用 HOME 或 END 键。

通过将disableNavOnKey设置为 true,可以完全禁用键盘导航。

  <chrono items={items} disableNavOnKey />

进入全屏模式 退出全屏模式

幻灯片模式

可以通过将slideShow属性设置为 true 来启用幻灯片。您还可以设置一个可选的slideItemDuration来设置卡之间的时间延迟。

  <chrono items={items} slideShow slideItemDuration={4500} />

进入全屏模式 退出全屏模式

标题位置

此设置仅适用于HORIZONTAL模式。道具titlePosition将各个标题的位置设置为TOP或BOTTOM。

  <chrono items={items}  titlePosition="BOTTOM" />

进入全屏模式 退出全屏模式

物品宽度

itemWidth道具可用于设置每个单独的时间线部分的宽度。此设置仅适用于HORIZONTAL模式。

内置

• ReactJS- 组件是用 React 和Typescript编写的。

元

Prabhu Murthy –@prabhumurthy2–prabhu.m.murthy@gmail.com

根据 MIT 许可分发。有关详细信息,请参阅LICENSE。

https://github.com/prabhuignoto/react-chrono