SDAIA

معرض الوسائط

يعرض معرض الوسائط شبكة تكيّفية من الصور أو مقاطع الفيديو مهيَّأة لنقاط تغيير سطح المكتب والجهاز اللوحي والجوال.

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

مرجع الواجهة البرمجية

MediaGalleryProps

خصائص مكوّن 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