Media Grid
A mixed media grid of photos, video, audio and docs with type badges, durations, filters, checkbox multi-select with range and a selection toolbar, and a lightbox handoff.
Preview
2 selected
- Photo
Harbour at dawn
4032 × 3024 · 3.1 MB
- Video0:42
Kiln opening
1080p · 48 MB
- Audio5:12
Studio walkthrough
m4a · 6.2 MB
- Docpdf
Glaze recipes
12 pages
- Photo
Drying rack
3024 × 3024 · 2.4 MB
- Photo
North pier
4032 × 3024 · 2.9 MB
- Video2:08
Wheel timelapse
4K · 210 MB
- Docxls
Spring price list
2 pages
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | MediaItem[] | — | { id, type: photo | video | audio | doc, title, meta?, duration?, thumb?, ext? }. |
| label | string | "Media" | Accessible name of the grid. |
| selected | string[] | — | Selected ids (controlled). |
| defaultSelected | string[] | [] | Initially selected ids. |
| onSelectedChange | (ids: string[]) => void | — | Called when the selection changes. |
| onOpen | (item: MediaItem, index: number) => void | — | Lightbox handoff: a tile was opened (click outside selection mode, or Enter). |
| actions | (ids: string[], clear: () => void) => ReactNode | — | Buttons for the selection toolbar. |
| filters | boolean | true | Show the type filter row with counts. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.