快速反應選框

使用 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中文網其他相關文章！