Classuper 的 @classuper/react-vertical-timeline-component 是一个 React 封装的垂直时间轴组件，可以用于构建时间线应用程序。他支持布局自定义，时间轴事件的添加与编辑等功能，非常适合前端开发者使用。本文将介绍 npm 包的使用方法，详细描述如何在项目中集成并使用 @classuper/react-vertical-timeline-component，并通过代码示例展示其使用，帮助读者快速掌握该组件的使用方法。
安装
创建 React 项目并使用 npm 安装 @classuper/react-vertical-timeline-component：
npx create-react-app my-app cd my-app npm install @classuper/react-vertical-timeline-component
或者如果你使用 yarn：
npx create-react-app my-app cd my-app yarn add @classuper/react-vertical-timeline-component
基本用法
在项目中引入 @classuper/react-vertical-timeline-component 并使用。我们将创建一个最基本的时间线，仅包含两个事件。
-- -------------------- ---- -------
------ -------- ---- -----------------------------------------------
-------- ----- -
------ -
---- ----------------
----------
----------------
-------------- --
-----------------
------------------
--------------
--
-----------------
----------------
-------------- --
-----------------
------------------
--------------
--
-----------------
-----------
------
--
-
------ ------- ----在上述示例中，我们首先引入了 Timeline 组件，然后在组件中使用 Timeline.Event 来添加时间轴事件。Timeline.Icon 和 Timeline.Content 表示时间线中的图标和内容。
组件 API
| 组件名称 | 说明 |
|---|---|
| Timeline | 时间线组件 |
| Event | 事件，必须嵌套于 Timeline 中 |
| Icon | 时间线图标，必须嵌套于 Timeline.Event 中 |
| Content | 时间线内容，必须嵌套于 Timeline.Event 中，可以包含 title 和 subtitle 属性 |
完整示例
下面的代码展示了如何在 @classuper/react-vertical-timeline-component 中使用多种事件和自定义标签。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------------------------------------------
------ ------------
-------- ----- -
------ -
---- ----------------
----------
----------------
-------------- --
-----------------
------------------
--------------
--
-----------------
----------------
-------------- --
-----------------
------------------
--------------
--
-----------------
----------------
-------------- --
-----------------
------------
-------------
--
-----------------
----------------
-------------- --
-----------------
-----------------
--------------
--
-----------------
----------------
---- --------------------------------------------------------------------- ------- ----- --
-----------------
-----------
----------------
--------------------
--
-----------------
-----------
------
--
-
------ ------- ----结果如下图所示：
总结
Classuper 的 @classuper/react-vertical-timeline-component 是一个 React 封装的垂直时间轴组件，可以用于构建时间线应用程序。本文介绍了如何在项目中集成和使用该组件，并提供了简单示例以帮助读者更好地理解如何使用该组件。如果你对实现时间线感兴趣，@classuper/react-vertical-timeline-component 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fc5