دیگ

Marqueev1.0.0

ردیف یا ستونی که بی‌نهایت و بدون درز اسکرول می‌کند: برای دیوارِ لوگوی مشتریان، تستیمونیال‌های چرخشی یا یک تیکرِ متنی. کاملاً با CSS ساخته شده (بدون JS/requestAnimationFrame)، پس هزینهٔ رندرش صفر است و روی موبایل هم روان کار می‌کند.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

React
Vue
Svelte
Angular
Next.js

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/marquee.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/marquee.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/marquee.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/marquee.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

import { Marquee, MarqueeItem } from "@/components/ui/marquee"

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

محتوای Marquee بر اساسِ repeat (پیش‌فرض ۲) چند بار پشتِ‌سرِهم رندر می‌شود و کل ردیف با یک @keyframes به اندازهٔ عرضِ یک نسخه جابه‌جا می‌شود؛ چون نسخه‌ها عیناً یکسان‌اند، لحظهٔ برگشت به نقطهٔ شروع دیده نمی‌شود. برای فهرست‌های خیلی کوتاه (مثلاً ۳ آیتم) اگر عرضشان از صفحه کمتر است، repeat را بیشتر کنید تا حفره‌ای در میانهٔ چرخه نیفتد.

duration و gap با دو متغیرِ CSS (--duration، --gap) روی خودِ عنصر ست می‌شوند، پس چند Marquee با سرعت‌های متفاوت در یک صفحه بدون تداخل کار می‌کنند.

دسترس‌پذیری

  • محتوای تکرارشده با aria-hidden از دیدِ صفحه‌خوان پنهان می‌شود؛ فقط نسخهٔ اول قابل‌خواندن می‌ماند.
  • انیمیشنِ پیوسته برای کاربرانِ حساس به حرکت آزاردهنده است؛ اگر محتوای Marquee صرفاً تزئینی نیست (مثلاً حاوی لینک است)، pauseOnHover بدهید تا با هاور/فوکوس متوقف شود.
  • این کامپوننت prefers-reduced-motion را خودکار رعایت نمی‌کند؛ برای رعایتِ کامل، در پروژهٔ خودتان media query را چک کنید و در آن حالت repeat={1} و بدونِ انیمیشن رندر کنید.

مرجع API

ویژگینوعپیش‌فرضتوضیح
direction"forward" | "reverse""forward"جهتِ حرکت.
verticalbooleanfalseاسکرولِ عمودی به‌جای افقی؛ والد باید ارتفاعِ مشخص داشته باشد.
pauseOnHoverbooleanfalseتوقفِ حرکت هنگامِ هاور روی Marquee.
durationnumber40مدتِ یک دورِ کامل بر حسب ثانیه؛ عددِ بزرگ‌تر یعنی کندتر.
gapnumber16فاصلهٔ بین نسخه‌های تکرارشده بر حسب پیکسل.
repeatnumber2چند بار محتوا تکرار شود؛ برای فهرست‌های کوتاه بیشتر کنید.
fadebooleanfalseمحوشدنِ لبه‌ها با گرادیانِ ماسک.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.