گالری تصاویر (ImageGallery)

گالری تصاویر (ImageGallery) یک کامپوننت است که گالری تصاویر ساده و قابل تنظیم با قابلیت لایت‌باکس را فراهم می‌کند. این کامپوننت بر اساس کتابخانه yet-another-react-lightbox ساخته شده است و ادغام آسان گالری‌های تصویری با تجربه‌های بهبود یافته مشاهده را ممکن می‌سازد.

مثال (Example)

استفاده نمونه

API

گالری تصاویر (ImageGallery)
ویژگیتوضیحاتنوعپیش‌فرض
openاگر true باشد، لایت‌باکس باز است.boolean
closeیک تابع بازگشتی برای بستن لایت‌باکس.() => void
indexشاخص اسلاید.
لایت‌باکس هنگام باز شدن این ویژگی را می‌خواند (در این حالت ویژگی index تعیین‌کننده‌ی شاخص شروع اسلاید است) و زمانی که ویژگی‌های slides یا index تغییر می‌کنند (در این حالت ویژگی index شاخص اسلاید فعلی را تعیین می‌کند). در اکثر موارد نیازی به ارائه این ویژگی ندارید، زیرا لایت‌باکس وضعیت خود را به‌صورت داخلی نگهداری می‌کند. اما ممکن است لازم باشد ویژگی index را زمانی که آرایه‌ی slides را تغییر می‌دهید یا به‌طور کامل جایگزین می‌کنید، ارائه دهید. برای پیگیری شاخص اسلاید فعلی، می‌توانید از تابع بازگشتی on.view استفاده کنید.		number0
slidesاسلایدهایی که باید در لایت‌باکس نمایش داده شوند. برای جزئیات، به اسلاید مراجعه کنید.
توجه داشته باشید که به‌روزرسانی آرایه‌ی slides (یا فقط تغییر مرجع آرایه) باعث می‌شود لایت‌باکس وضعیت خود را بر اساس مقادیر فعلی slides و index به‌روزرسانی کند. شما می‌توانید از یک مرجع آرایه ناپایدار (یعنی slides={[{ ... }]} یا slides={items.map((item) => ({ ... }))}) به‌طور امن استفاده کنید به‌شرطی که کامپوننتی که لایت‌باکس را نگه می‌دارد در حالی که لایت‌باکس باز است، دوباره رندر نشود. با این حال، اگر کامپوننت شما ممکن است دوباره رندر شود، مطمئن شوید که یا ویژگی slides را به‌عنوان یک مرجع پایدار آرایه (یعنی const در محدوده ثابت یا با استفاده از React.useState یا React.useMemo) ارائه دهید یا شاخص اسلاید فعلی را در ویژگی index مشخص کنید.		Slide[][]
renderتوابع رندر سفارشی. برای جزئیات، به Render مراجعه کنید.Render
pluginsافزونه‌های فعال‌شده.
مثال: plugins={[Fullscreen, Video]}		Plugin[]
labelsبرچسب‌ها / ترجمه‌های سفارشی رابط کاربری.
مثال: labels={{ Next: "اسلاید بعدی" }}		object
toolbarتنظیمات نوار ابزار.
buttons - دکمه‌هایی که در نوار ابزار رندر می‌شوند		{
  buttons: (React.ReactNode | "close")[];
}		{ buttons: ["close"] }
carouselتنظیمات کاروسل.
finite - اگر true باشد، کاروسل لایت‌باکس به دور خود نمی‌چرخد
preload - لایت‌باکس (2 * preload + 1) اسلاید را پیش‌بارگذاری می‌کند
padding - فاصله اطراف هر اسلاید
spacing - فاصله بین اسلایدها
imageFit - تنظیم object-fit برای اسلایدهای تصویری
imageProps - ویژگی‌های سفارشی برای تصاویر		{ finite?: boolean; preload?: number; padding?: string | number; spacing?: string | number; imageFit?: "contain" | "cover" imageProps?: React.ImgHTMLAttributes }{ finite: false, preload: 2, padding: "16px", spacing: "30%", imageFit: "contain" }
animationتنظیمات انیمیشن.
fade - مدت زمان انیمیشن محو شدن
swipe - مدت زمان انیمیشن سوایپ
navigation - تغییر مدت زمان انیمیشن سوایپ هنگام استفاده از ناوبری صفحه‌کلید یا دکمه‌های ناوبری
easing - تنظیمات تابع زمان‌بندی انیمیشن
fade - تابع زمان‌بندی انیمیشن محو شدن
swipe - تابع زمان‌بندی انیمیشن سوایپ
navigation - تابع زمان‌بندی انیمیشن ناوبری (هنگام استفاده از صفحه‌کلید یا دکمه‌های ناوبری)		{
  fade?: number;
  swipe?: number;
  navigation?: number;
  easing?: {
    fade?: string;
    swipe?: string;
    navigation?: string;
  }
}		{ fade: 250, swipe: 500, easing: { fade: "ease", swipe: "ease-out", navigation: "ease-in-out" } }
controllerتنظیمات کنترلر.
ref - مرجع کنترلر لایت‌باکس
focus - منسوخ شده، فقط برای استفاده داخلی
aria - اگر true باشد، ویژگی‌های ARIA را روی div کنترلر تنظیم می‌کند
touchAction - منسوخ شده، فقط برای استفاده داخلی
closeOnPullUp - اگر true باشد، لایت‌باکس در هنگام کشیدن به بالا بسته می‌شود
closeOnPullDown - اگر true باشد، لایت‌باکس در هنگام کشیدن به پایین بسته می‌شود
closeOnBackdropClick - اگر true باشد، لایت‌باکس زمانی که روی پس‌زمینه کلیک شود، بسته می‌شود		{
  ref?: React.ForwardedRef<ControllerRef>
  focus?: boolean;
  aria?: boolean;
  touchAction?: "none" | "pan-y";
  closeOnPullUp?: boolean;
  closeOnPullDown?: boolean;
  closeOnBackdropClick?: boolean;
}		{ ref: null, focus: true, aria: false, touchAction: "none" }
portalتنظیمات پورتال.
root - نقطه نصب سفارشی پورتال. به‌طور پیش‌فرض، پورتال به‌عنوان فرزند بدنه سند نصب می‌شود.		{
  root?: DocumentFragment | Element | null;
}
noScrollتنظیمات ماژول اسکرول.
disabled - غیرفعال‌سازی اسکرول لایت‌باکس (درصورتی‌که noScroll به‌طور پیش‌فرض فعال باشد).		{
  disabled?: boolean;
}
backdropنحوه نمایش پس‌زمینه در لایت‌باکس.{ boolean | "dim" | "none" }dim