يعرض معرض الوسائط شبكة تكيّفية من الصور أو مقاطع الفيديو مهيَّأة لنقاط تغيير سطح المكتب والجهاز اللوحي والجوال.
Loading demo: media-gallery-real-world
npx sdaia-ui@latest add media-gallery
import { MediaGallery } from "@/components/ui/media-gallery"<MediaGallery breakpoint="desktop" />معرض الوسائط بتخطيط سطح مكتب متعدد الأعمدة.
Loading demo: media-gallery-desktop
معرض الوسائط متكيّفاً مع أحجام شاشات الجهاز اللوحي.
Loading demo: media-gallery-tablet
معرض الوسائط بتخطيط جوال عمود واحد.
Loading demo: media-gallery-mobile
خصائص مكوّن MediaGallery.
Prop | Type | Default | Required |
|---|---|---|---|
toolbar | boolean | true | optional |
searchValue | string | - | optional |
onSearchChange | (value: string) => void | - | optional |
searchPlaceholder | string | 'Search' | optional |
emptySearchLabel | string | 'No results found' | optional |
activeView | 'list' | 'grid' | - | optional |
onViewChange | (view: MediaGalleryView) => void | - | optional |
onFilterClick | () => void | - | optional |
onDeleteClick | (selectedImages: MediaGalleryImage[]) => void | - | optional |
onExportClick | (selectedImages: MediaGalleryImage[]) => void | - | optional |
exportLabel | string | 'Export' | optional |
onAddClick | () => void | - | optional |
addLabel | string | 'Add' | optional |
onMoreClick | () => void | - | optional |
images | MediaGalleryImage[] | [] | optional |
pagination | boolean | true | optional |
currentPage | number | 1 | optional |
totalPages | number | 1 | optional |
onPageChange | (page: number) => void | - | optional |
rtl | boolean | false | optional |
dir | "ltr" | "rtl" | — | optional |