隆重推出 react-chrono——一款灵活的 React 时间线组件

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

隆重推出react-chrono，一个专为 React 构建的灵活时间轴组件。

Fork 此仓库

演示

特征

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

✅树状图- 使用此Tree模式以树状方式垂直排列时间线卡片。

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

✅键盘支持- 在或模式下，可以使用UP、DOWN键浏览时间线。在模式下，可以使用 、 键。verticaltreehorizontalLEFTRIGHT

✅自定义主题theme- 使用属性自定义颜色

安装

yarn install react-chrono

🚀 入门指南

请确保将组件包裹在具有 `<style>`width和 `<style>` 属性的容器中height。如果没有mode指定 `<style>` 属性，则组件默认为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>

垂直的

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

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

树

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

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

幻灯片

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

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

在 CodeSandbox 上试试吧！

道具

模式

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

键盘导航及禁用

时间轴默认可以通过键盘进行导航。

• HORIZONTAL使用LEFT RIGHT方向键导航即可切换模式。
• 在VERTICAL“或”TREE模式下，可以通过方向键浏览时间轴UP DOWN。
• 要轻松跳转到时间线中的第一个项目或最后一个项目，请使用HOME或END键。

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

  <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编写的。

元

普拉布·穆尔蒂 – @prabhumurthy2 – prabhu.m.murthy@gmail.com

本软件以 MIT 许可证发布。LICENSE详情请参阅许可证文件。

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