گالریِ آکاردئونیAccordion Gallery

ردیفی از قاب‌های تصویر که مثلِ آکاردئون باز می‌شه: قابِ فعال با خمِ نرم بزرگ و رنگی می‌شه، بقیه خاکستریِ تیره و کمی خمیده می‌مونن و برچسب با تأخیرِ پلکانی سر باز می‌کنه — افقی یا عمودی، با هاور یا کلیک.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

بدون وابستگی

نوع تعامل

با `trigger: hover` فقط رفتنِ نشانگر روی هر قاب بازش می‌کنه و با `trigger: click` کلیک لازمه؛ کلیکِ دوباره روی قابِ باز، لینکش رو دنبال می‌کنه (اگه `link` داشته باشه). فوکوس و کلیدهای جهت هم قاب‌ها رو می‌گردن — ArrowRight/ArrowDown جلو، ArrowLeft/ArrowUp عقب.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

items
Array<{ image: string; label?: string; link?: string; alt?: string }>پیش‌فرض: ۵ عکسِ نمونه

تصویرهای گالری؛ هر کدام در قابِ خود برشِ مرکزی می‌خورند. `label` برچسبِ قابِ باز، `link` مقصدِ کلیک و `alt` متنِ جایگزین است.

defaultIndex
numberپیش‌فرض: 2

قابی که موقعِ اولین رندر باز باشد. فقط رویِ همان رندر اثر دارد؛ تغییرِ بعدی‌اش بی‌اثر است — برای کنترلِ زنده `activeIndex` را ببینید.

activeIndex
numberپیش‌فرض: —

کانالِ کنترل‌شده برای راننده‌های بیرونی (مثلِ معرفیِ خودکارِ میزکار). وقتی مقدار بدهید قابِ فعال هم‌گام می‌شود و وقتی ندهید کامپوننت نام‌کنترل‌شده می‌ماند و دستِ کاربر بی‌واسطه است.

accentColor
stringپیش‌فرض: '#ffffff'

رنگِ نوارِ کنارِ برچسب و حلقه‌ی فوکوسِ قاب‌ها.

overlayColor
stringپیش‌فرض: '#060010'

رنگِ پرده‌ی تیره‌ی رویِ تصویرها و گرادیانِ زیرِ برچسب.

textColor
stringپیش‌فرض: '#ffffff'

رنگِ متنِ برچسب‌ها.

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

components.jsonjson
{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/accordion-gallery

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

accordion-gallery.tsxtsx
"use client";

import AccordionGallery from "@/components/farsify/accordion-gallery";

const shots = [
  { image: "/images/canyon.jpg", label: "دره" },
  { image: "/images/ridge.jpg", label: "خط‌الرأس" },
  { image: "/images/falls.jpg", label: "آبشار" },
  { image: "/images/dusk.jpg", label: "غروبِ دریا" },
  { image: "/images/skyline.jpg", label: "خطِ آسمان" },
];

export function GalleryStrip() {
  return (
    <div style={{ height: 460 }}>
      <AccordionGallery items={shots} />
    </div>
  );
}

// قابِ سوم موقعِ ورود باز باشد و برچسب‌ها تمام‌رنگ بمانند
<AccordionGallery items={shots} defaultIndex={2} grayscale={false} />

// ستونِ عمودیِ کنارِ صفحه با خمِ تند و پارالاکسِ قوی
<AccordionGallery
  items={shots}
  orientation="vertical"
  height={300}
  expandRatio={0.62}
  tilt={14}
  parallax={0.9}
/>

// باز شدن فقط با کلیک + رنگِ لهجه‌ی خودتان
<AccordionGallery
  items={shots}
  trigger="click"
  accentColor="#f5b400"
  duration={0.4}
/>

// بدونِ برچسب، فقط تصویر
<AccordionGallery items={shots} showLabels={false} radius={28} />

نکته‌ها

  • بدونِ هیچ وابستگی: مرجع gsap داشت؛ این‌جا همان هندسه با ترنزیشنِ CSS و منحنیِ معادلِ `power3.out` بازسازی شده و حجمِ صفر اضافه می‌آورد.
  • با `grayscale` روشن، رنگ فقط نصیبِ قابِ باز می‌شه — باز و بسته شدنِ قاب‌ها خودش «روایتِ رنگ» می‌سازه؛ خاموشش کن اگه گالریِ تمام‌رنگ می‌خوای.
  • جهتِ عمودی + `expandRatio` بالا برای ستونِ کنارِ صفحه خوبه؛ ارتفاعِ نهایی ۱٫۶ برابرِ `height` می‌شه، جاگیریِ قاب رو در نظر بگیر.
  • قابِ فعالِ زمانِ شروع با `defaultIndex`، و راندنِ زنده با `activeIndex`؛ هر دو محدوده‌شون بیرون از فهرست clamp می‌شه.
  • توی موبایلِ باریک (زیرِ ۵۲۰px) ردیف خودش عمودیِ کاشی‌وار می‌شه و خمِ سه‌بعدی خاموشه — مثلِ مرجع.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.