Media gallery

A shop's own photos and loops in tiles — the first featured, loops playing muted while their tile is on screen (a still under reduced motion), a caption on the foot of a tile.

Web · ✓Mobile · n/aBureau · ✓BêtaMédias

import { MediaGallery } from "@krizaka/ui/media-gallery";

First snow

Web uniquement — React, depuis @krizaka/ui/media-gallery. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. A shop's public storefront is a web page. → Photo grid

Pourquoi il est là. Used by Akinaza.

Quand l’utiliser

The « look inside » of a business page: its real photos and short clips.

Quand ne pas l’utiliser

A feed of videos with creators, counts and a preview.À la place : Media grid
Editing and ordering a profile's photos.À la place : Photo grid
A demo gallery with titles and captions per piece.

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { MediaGallery } from "@krizaka/ui/media-gallery";

Exemples

Shop

Three photos, the first featured, one with a caption.

First snow

Props

Photos and loops in tiles, the first featured; loops play while seen.

Prop	Type	Défaut	Description
`items`requis	`readonly GalleryMedia[]`	—	The photos and loops, the featured one first.
`label`requis	`string`	—	The gallery's accessible name, passed translated.

Accessibilité

A list named by label; each tile is a figure with the photo's alt and its caption.
A loop is decorative (aria-hidden), starts only while its tile is on screen and never under reduced motion.

Bonnes pratiques

Real photos only; every tile has alt text that says what it shows.
Give a landscape source shape="wide" so it is not cropped to a portrait.
Keep loops short and few: one or two per gallery.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub