react-chrono - 🕜 用于 React 的现代时间轴组件

Created at: 2020-08-19 03:02:24

Language: TypeScript

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

License: MIT

特征

🚥以三种不同的模式（水平、垂直、垂直交替）渲染时间线。
📺 使用幻灯片模式自动播放时间线。
🖼️ 轻松在时间线中显示图像和视频。
⌨ 键盘可访问。
🔧 轻松呈现自定义内容。
⚡ 数据驱动的 API。
🎨 轻松自定义颜色。
🎭在时间线中使用自定义图标。
💪 使用Typescript 构建。
🎨 风格与情感。

⚡ 安装

yarn add react-chrono

入门

请确保将组件包装在带有

width

和的容器中

height

。

当没有

mode

指定时，组件默认为

HORIZONTAL

模式。请检查所有可用选项的道具。

  import React from "react"
  import { Chrono } from "react-chrono";
  
  const Home = () => {
    const items = [{
      title: "May 1940",
      cardTitle: "Dunkirk",
      cardSubtitle:"Men of the British Expeditionary Force (BEF) wade out to..",
      cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
      media: {
        type: "IMAGE",
        source: {
          url: "http://someurl/image.jpg"
        }
      }
    }, ...];

    return (
      <div style={{ width: "500px", height: "400px" }}>
        <Chrono items={items} />
      </div>
    )
  }

🚥垂直模式

要垂直渲染时间线，请使用

VERTICAL

模式

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

🚥垂直交替

在

VERTICAL_ALTERNATING

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

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

📺幻灯片

使用该

slideShow

模式自动播放时间线。此道具启用 ui 控件上的播放按钮。

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

道具

姓名	描述	默认
模式	设置组件的模式。可以是 HORIZONTAL ， VERTICAL 或者 VERTICAL_ALTERNATING	HORIZONTAL
项目	时间线项目模型的集合。	[]
禁用导航键	禁用键盘导航。	错误的
幻灯片	启用幻灯片放映控制。	错误的
幻灯片项目持续时间	持续时间（以毫秒为单位），时间线卡在 slideshow .	5000
项目宽度	HORIZONTAL 模式下时间线部分的宽度。	300
隐藏控件	隐藏导航控件。	错误的
允许动态更新	允许动态更新时间线项目。	错误的
卡片高度	设置时间线卡的最小高度。	200
卡片宽度	设置时间线卡的最大宽度。
可滚动	使时间线可滚动（适用于 VERTICAL & VERTICAL_ALTERNATING ）。	真的
翻转布局	flips the layout (RTL). applicable only to VERTICAL and VERTICAL_ALTERNATING	false
cardPositionHorizontal	positions the card in HORIZONTAL mode. can be either TOP or BOTTOM
theme	prop to customize the colors.
onScrollEnd	use the onScrollEnd to detect the end of the timeline.
onItemSelected	callback invoked on a item selection. passes all of the data pertinent to the item.
useReadMore	enables or disables the read more button. when disabled the card will auto expand to fit the content	true
enableOutline	enables the outline menu on VERTICAL and VERTICAL_ALTERNATING mode.	false
borderLessCards	removes the border & shadow from the timeline item cards.	false

Mode

react-chrono

supports three modes

HORIZONTAL

VERTICAL

and

VERTICAL_ALTERNATING

. No additional setting is required.

  <Chrono items={items} mode="HORIZONTAL" />

  <Chrono items={items} mode="VERTICAL" />

  <Chrono items={items} mode="VERTICAL_ALTERNATING" />

Timeline item Model

name	description	type
title	title of the timeline item	String
cardTitle	title that is displayed on the timeline card	String
cardSubtitle	text displayed in the timeline card	String
cardDetailedText	detailed text displayed in the timeline card	String or String[]
media	media object to set image or video.	Object

{
  title: "May 1940",
  cardTitle: "Dunkirk",
  cardSubtitle:
    "Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
  cardDetailedText: ["paragraph1", "paragraph2"],
}

if you have a large text to display(via

cardDetailedText

) and want to split the text into paragraphs, you can pass an

array

of strings.

each array entry will be created as a paragraph inside the timeline card.

⌨Keyboard Navigation

The timeline can be navigated via keyboard.

For
```
HORIZONTAL
```
mode use your LEFT RIGHT arrow keys for navigation.
For
```
VERTICAL
```
or
```
VERTICAL_ALTERNATING
```
mode, the timeline can be navigated via the UP DOWN arrow keys.
To easily jump to the first item or the last item in the timeline, use HOME or END keys.

禁用键盘导航设置

disableNavOnKey

为 true。

<Chrono items={items} disableNavOnKey />

可滚动

使用 scrollable 道具，你可以在

VERTICAL

和

VERTICAL_ALTERNATING

模式下启用滚动。

  <Chrono items={items} scrollable />

默认情况下不显示滚动条。要启用滚动条，请将带有 prop 的对象传递

scrollbar

给

scrollable

prop。

  <Chrono items={items} scrollable={{scrollbar: true}} />

📺媒体

图像和视频都可以嵌入到时间线中。

只需将该

media

属性添加到Timeline Item 模型，该组件将负责其余的工作。

嵌入图像

{
  title: "May 1940",
  cardTitle: "Dunkirk",
  media: {
    name: "dunkirk beach",
    source: {
      url: "http://someurl/image.jpg"
    },
    type: "IMAGE"
  }
}

嵌入视频

视频在活动时自动开始播放，不活动时将自动暂停。

与图像一样，视频在不在容器的可见视口中时也会自动隐藏。

{
  title: "7 December 1941",
  cardTitle: "Pearl Harbor",
  media: {
    source: {
      url: "/pearl-harbor.mp4",
      type: "mp4"
    },
    type: "VIDEO",
    name: "Pearl Harbor"
  }
}

要嵌入 YouTube 视频，请使用正确的嵌入网址。

{
  title: "7 December 1941",
  cardTitle: "Pearl Harbor",
  media: {
    source: {
      url: "https://www.youtube.com/embed/f6cz9gtMTeI",
      type: "mp4"
    },
    type: "VIDEO",
    name: "Pearl Harbor"
  }
}

🛠渲染自定义内容

该组件还支持在

Timeline

卡片中嵌入自定义内容。

要插入自定义内容，只需在

Chrono

标签之间传递被阻止的元素。

例如，下面的代码片段将创建 2 个时间线项目。每个

div

元素都会自动转换为时间线项目并插入到时间线卡中。该项目集完全是可选的定制渲染支持所有的3种模式。

  <Chrono mode="VERTICAL">
    <div>
      <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
    </div>
    <div>
      <img src="<url to  a nice image" />
    </div>
  </Chrono>

items 集合也可以很好地处理传递的任何自定义内容。

以下代码段设置自定义内容的

title

和

cardTitle

。

  const items = [
    {title: "Timeline title 1", cardTitle:  "Card Title 1"},
    {title: "Timeline title 2", cardTitle:  "Card Title 2"}
  ];

  <Chrono mode="VERTICAL" items={items}>
    <div>
      <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
    </div>
    <div>
      <img src="<url to  a nice image" />
    </div>
  </Chrono>

🎭时间轴的自定义图标

要在时间轴中使用自定义图标，请在

chrono

包装在容器中的标签之间传递图像集合。

图标按顺序设置（即）你传递的第一个图像将用作第一个时间线项目的图标，依此类推。

请确保在具有特殊 className 的容器内传递图像集合

chrono-icons

。这个约定是强制性的，因为组件使用它

class name

来选择图像。

 <Chrono items={items} mode="VERTICAL_ALTERNATING">
   <div className="chrono-icons">
     <img src="image1.svg" alt="image1" />
     <img src="image2.svg" alt="image2" />
   </div>
 </Chrono>

如果你在卡片内呈现自定义内容，自定义图标也有效。

  <Chrono mode="VERTICAL" items={items}>
    <div>
      <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
    </div>
    <div>
      <img src="<url to  a nice image" />
    </div>
    <div className="chrono-icons">
      <img src="image1.svg" alt="image1" />
      <img src="image2.svg" alt="image2" />
    </div>
  </Chrono>

幻灯片模式

可以通过将

slideShow

prop设置为 true来启用幻灯片放映。你还可以设置一个选项

slideItemDuration

来设置卡之间的时间延迟。

设置此道具将启用时间线控制面板中的播放按钮。

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

大纲

使用

enableOutline

prop，你可以在时间线上启用大纲并快速跳转到特定的时间线项目。轮廓仅支持

VERTICAL

和

VERTICAL_ALTERNATING

模式。

<Chrono items={items} enableOutline />

项目宽度

该

itemWidth

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

HORIZONTAL

模式。

🎨主题

使用

theme

道具自定义颜色。

<Chrono
  items={items}
  theme={{ 
    primary: "red",
    secondary: "blue",
    cardBgColor: "yellow",
    cardForeColor: "violet",
    titleColor: "red"
  }}
/>

📦CodeSandbox 示例

📚故事书

深入了解作为故事书托管的各种示例。

🔨构建设置

# install dependencies
yarn install

# start dev setup
yarn run start

# run css linting
yarn run lint:css

# eslint
yarn run eslint

# prettier
yarn run lint

# package lib
yarn run rollup

🧪测试

  # run unit tests
  yarn run test

  # run cypress tests
  yarn run cypress:test

🤝贡献

分叉吧
创建你的功能分支 (
```
git checkout -b new-feature
```
)
提交你的更改 (
```
git commit -am 'Add feature'
```
)
推送到分支 (
```
git push origin new-feature
```
)
创建一个新的拉取请求

🧱内置

打字稿。
风格与情感。
由雪包提供动力

元

非常感谢BrowserStack的开源许可证！

在 MIT 许可下分发。请参阅

LICENSE

贡献者 ✨

感谢这些优秀的人（表情符号键）：

_浩二

_龙也

该项目遵循所有贡献者规范。欢迎任何形式的贡献！