گالری تصاویر (ImageGallery) یک کامپوننت است که گالری تصاویر ساده و قابل تنظیم با قابلیت لایتباکس را فراهم میکند. این کامپوننت بر اساس کتابخانه yet-another-react-lightbox ساخته شده است و ادغام آسان گالریهای تصویری با تجربههای بهبود یافته مشاهده را ممکن میسازد.
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| open | اگر true باشد، لایتباکس باز است. | boolean | |
| close | یک تابع بازگشتی برای بستن لایتباکس. | () => void | |
| index | شاخص اسلاید. لایتباکس هنگام باز شدن این ویژگی را میخواند (در این حالت ویژگی index تعیینکنندهی شاخص شروع اسلاید است) و زمانی که ویژگیهای slides یا index تغییر میکنند (در این حالت ویژگی index شاخص اسلاید فعلی را تعیین میکند). در اکثر موارد نیازی به ارائه این ویژگی ندارید، زیرا لایتباکس وضعیت خود را بهصورت داخلی نگهداری میکند. اما ممکن است لازم باشد ویژگی index را زمانی که آرایهی slides را تغییر میدهید یا بهطور کامل جایگزین میکنید، ارائه دهید. برای پیگیری شاخص اسلاید فعلی، میتوانید از تابع بازگشتی on.view استفاده کنید. | number | 0 |
| 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 |