React.js 中的时间轴组件

在许多 Web 应用程序中，时间轴是一种流行的交互方式，它允许用户查看和导航他们的活动历史记录。React.js 框架提供了许多时间轴组件，使得创建交互式时间线变得更加容易和快捷。

react-vertical-timeline-component

react-vertical-timeline-component 是一个简单的垂直时间轴组件，可以在 React 应用程序中使用。它在设计上非常灵活，可以根据不同的需求进行自定义。该组件提供了很多自定义属性，可以适应不同的样式和布局需求。

import React from 'react';
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

const MyTimeline = () => {
  return (
    <VerticalTimeline>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        contentStyle={{ background: '#fff', color: '#000' }}
        contentArrowStyle={{ borderRight: '7px solid  #fff' }}
        date="2011 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        icon={<WorkIcon />}
      >
        <h3 className="vertical-timeline-element-title">Creative Director</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
          Creative Direction, User Experience, Visual Design, Project Management, Team Leading
        </p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
        date="2010 - 2011"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        icon={<WorkIcon />}
      >
        <h3 className="vertical-timeline-element-title">Art Director</h3>
        <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
        <p>
          Creative Direction, User Experience, Visual Design, SEO, Online Marketing
        </p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        date="2008 - 2010"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        icon={<WorkIcon />}
      >
        <h3 className="vertical-timeline-element-title">Web Designer</h3>
        <h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
        <p>User Experience, Visual Design</p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        className="vertical-timeline-element--education"
        date="April 2013"
        iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
        icon={<SchoolIcon />}
      >
        <h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
        <h4 className="vertical-timeline-element-subtitle">Online Course</h4>
        <p>Strategy, Social Media</p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        className="vertical-timeline-element--education"
        date="November 2012"
        iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
        icon={<SchoolIcon />}
      >
        <h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
        <h4 className="vertical-timeline-element-subtitle">Certification</h4>
        <p>Creative Direction, User Experience, Visual Design</p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        className="vertical-timeline-element--education"
        date="2002 - 2006"
        iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
        icon={<SchoolIcon />}
      >
        <h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
        <h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
        <p>Creative Direction, Visual Design</p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
        icon={<StarIcon />}
      />
    </VerticalTimeline>
  );
};

React Timeline Components

React Timeline Components 库提供了一套用于时间轴的 React 组件，使得创建时间轴变得更加容易和快捷。它提供了一个简单的 API，并支持许多自定义选项。

import React from 'react';
import { Timeline, TimelineEvent } from 'react-event-timeline';
 
const MyTimeline = () => {
  return (
    <Timeline>
      <TimelineEvent
        title="John Doe sent a SMS"
        createdAt="2016-09-12 10:06 PM"
        icon={<MessageIcon />}
      >
        I received the payment for $543. Should be shipping the item within a couple of hours. Thanks for
        the prompt payment.
      </TimelineEvent>
      <TimelineEvent
        title="You sent an email to John Doe"
        createdAt="2016-09-11 09:06 AM"
        icon={<MailIcon />}
      >
        <p>Subject: Any updates?</p>
        <p>
          Like we talked, you said that you would share the shipment details? This is an urgent
          matter for the client and we need to ensure that the shipment is routed through a
          safe channel.
        </p>
      </TimelineEvent>
      <TimelineEvent
        title="You sent an email to John Doe"
        createdAt="2016-09-11 08:06 AM"
        icon={<MailIcon />}
      >
        <p>Subject: Any updates?</p>
        <p>
          Like we talked, you said that you would share the shipment details? This is an urgent
          matter for the client and we need to ensure that the shipment is routed through a
          safe channel.
        </p>
      </TimelineEvent>
    </Timeline>
  );
};

React Trello Timeline

React Trello Timeline 是一个时间轴组件，提供了进阶、美化的时序组织方案。它可以用 React 简单地实现复杂的时序需求。

import React from 'react';
import { TrelloTimeline } from 'react-trello-timeline';
 
const MyTimeline = () => {
  return (
    <TrelloTimeline lists={lists} onUpdateCard={onUpdateCard} />
  );
};

结语

以上就是 React.js 中的时间轴组件的介绍，这些组件方便、灵活，使得时间轴的实现变得无比简单。您可以根据自己的需求挑选合适的组件进行使用，让您的 Web 应用程序更加美观、实用。