快速反应选框

使用 React Fast Marquee 创建平滑选框

本文介绍了 React Fast Marquee，一个简单但功能强大的组件，用于创建平滑滚动的选取框。 即使使用 Next.js，集成也非常容易。

安装

安装很简单：

<code class="language-bash">npm install react-fast-marquee --save</code>

导入组件：

<code class="language-javascript">import Marquee from "react-fast-marquee";</code>

用法

只需将您的内容包含在 <Marquee> 标签内即可。 这可以是文本、单个 React 组件或多个组件。

<code class="language-javascript"><Marquee>
  This is my marquee text.  It will scroll smoothly!
</Marquee></code>

React Fast Marquee 提供了众多可定制的道具，包括 className、autoFill、loop、gradient 等。 详细的使用说明请参考组件的文档和demo。

示例：品牌展示

以下是如何使用 React Fast Marquee 在美食设备网站上创建品牌展示：

<code class="language-javascript">const brands = [
    {
        id: 1,
        name: 'ecolab',
        logo: '/brands/ecolab.webp',
    },
    // ... more brands
    ];


const MarqueeBrands = () => {
    return (
        <Marquee>
            {brands.map(brand => (
                <img alt={brand.name} className="w-[100px] sm:w-[150px] md:w-[200px] h-[70px] sm:h-[75px] md:h-[100px] object-contain mx-4 md:mx-6" height={100} key={brand.name} quality={50} sizes="(max-width: 768px) 150px, 200px" src={brand.logo} width={200} />
            ))}
        </Marquee>
    )
}</code>

结果是具有视觉吸引力、平滑滚动的品牌展示。

以上是快速反应选框的详细内容。更多信息请关注PHP中文网其他相关文章！