Photo grid

A profile's photos in slots: the first is the main one, empty slots invite to add, photos reorder by drag (web), by their menu (React Native) or by buttons — every move announced.

Web + MobileBêtaMédias

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Yasakia's people screens (PY3/PY4) and Orochia's creator pages.

Quand l’utiliser

A dating profile's photos, the first one shown first.
A product's gallery to order before publishing.

Quand ne pas l’utiliser

To pick the files themselves.À la place : Media picker
To show photos full screen.À la place : Image viewer

Installation

Installer

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

Styles

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

Importer

import { PhotoGrid } from "@krizaka/ui/photo-grid";

Exemples

Profile photos

Three photos, the first main, two required.

Props

A profile's photos in slots: drag to reorder, or each photo's buttons (earlier, later, remove), every move announced.

Prop	Type	Défaut	Description
`labels`requis	`PhotoGridLabels`	—	The words, passed translated.
`onValueChange`requis	`(photos: GridPhoto[]) => void`	—	Called with the new order, or without a removed photo.
`value`requis	`readonly GridPhoto[]`	—	The photos, in order: the first is the main one.
`className`	`string`	—	Classes merged on the root.
`columns`	`number`	`3`	Columns. Default 3.
`onAdd`	`(() => void)`	—	Called by an empty slot: open the file picker, the camera, the editor.
`required`	`number`	`1`	Fewest photos required: the empty slots up to it are marked. Default 1.
`slots`	`number`	`6`	How many slots. Default 6.

Accessibilité

Each photo is named by its position and words, the main one says so.
Every move is announced; React Native offers the same moves as accessibility actions.

Clavier

Touches	Action
`Tab`	Moves through the photos and their buttons (earlier, later, remove).

Bonnes pratiques

Mark the required slots (required).
Open the MediaPicker, the camera or the MediaEditor from onAdd, then add what comes back.

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