Marquee 项目技术文档

最新推荐文章于 2025-05-19 18:07:58 发布

谢敏栋

最新推荐文章于 2025-05-19 18:07:58 发布

阅读量876

点赞数 20

本文链接：https://blog.csdn.net/gitblog_01204/article/details/143036938

版权

Marquee 项目技术文档

marquee A beautiful marquee component for React. 项目地址: https://gitcode.com/gh_mirrors/mar/marquee

1. 安装指南

1.1 使用 npm 安装

要安装 Marquee 组件，请在终端中运行以下命令：

npm install @devnomic/marquee

1.2 手动安装

如果你不想使用 npm 安装，可以直接将源代码复制到你的项目中。请确保同时复制 Tailwind 配置文件（如果使用 Tailwind CSS）。

2. 项目的使用说明

2.1 导入组件

安装完成后，你可以在你的 React 项目中导入 Marquee 组件：

import { Marquee } from "@devnomic/marquee";
import "@devnomic/marquee/dist/index.css";

2.2 使用组件

Marquee 组件非常易于使用，只需将其添加到你的 JSX 中，并传递所需的属性即可：

<Marquee
  fade={true}
  direction="left"
  reverse={false}
  pauseOnHover={false}
  className="" // 传递类以更改间距或速度
  innerClassName="" // 传递类以更改间距或速度
>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
</Marquee>

2.3 自定义样式

该库专为 Tailwind CSS 用户设计，但你也可以使用普通的 CSS 类来覆盖默认样式。通过传递 className 和 innerClassName 属性，你可以自定义间距和速度。

3. 项目API使用文档

3.1 属性说明

fade (boolean): 是否启用淡入淡出效果。
direction (string): 滚动方向，可选值为 "left" 或 "right"。
reverse (boolean): 是否反向滚动。
pauseOnHover (boolean): 鼠标悬停时是否暂停滚动。
className (string): 传递给 Marquee 组件的类名，用于自定义样式。
innerClassName (string): 传递给内部容器的类名，用于自定义样式。

3.2 示例

<Marquee
  fade={true}
  direction="left"
  reverse={false}
  pauseOnHover={true}
  className="custom-marquee"
  innerClassName="custom-inner"
>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
</Marquee>