Component
MediaGrid
A gallery of images, videos, audio and embeds that opens each in a `Lightbox`.
import { MediaGrid } from '@loidolt/theme-svelte';
Example
Notes
- One tab stop for the whole gallery: arrow keys, Home and End move between tiles.
- Tiles for video and audio say so, visibly and in their accessible names.
variant="masonry"keeps each image's own shape in columns;minColumnWidthsets how narrow a column may get.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
items required | MediaItem[] | — | |
label required | string | — | Accessible name of the collection. |
class | string | — | |
gap | 'sm' | 'md' | 'lg' | 'md' | |
kindLabels | Partial<Record<MediaItem['kind'], string>> | — | Words for the marker on time-based tiles. |
lightbox | boolean | true | Open a Lightbox on the pressed item. |
minColumnWidth | string | '12rem' | Narrowest a column may get before the grid drops one. |
onSelect | (index: number, item: MediaItem) => void | — | Called when an item is pressed, whether or not the lightbox opens. |
ratio | AspectRatioName | string | number | 'photo' | |
ref bindable | HTMLUListElement | null | null | |
variant | 'grid' | 'masonry' | 'grid' | grid crops tiles to ratio; masonry keeps each image's own shape in columns. |
Plus the attributes of Omit<HTMLAttributes<HTMLUListElement>, 'children'>, forwarded to the root element.