Image Result Grid

Галерея результатов, действия и лайтбокс. Pro · Изображения и генерация › Результаты и правка

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add image-result-grid

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ImageResultGrid } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`items` *	`readonly GeneratedImage[]`		Finished images with their generation parameters, shown as tiles and in the viewer.
`layout`	`'grid' \| 'masonry'`	`'grid'`	`grid` crops to squares; `masonry` keeps every image's aspect ratio.
`minColumnWidth`	`number`	`200`	Narrowest column before the grid drops one. Default 200.
`selectable`	`boolean`	`true`	Checkboxes and a selection bar. Default true.
`selected`	`string[]`		Controlled `selected`; use with `onSelectedChange`.
`defaultSelected`	`string[]`	`[]`	Initial `selected` when uncontrolled.
`onSelectedChange`	`(ids: string[]) => void`		Called with the new `selected` when it changes.
`onAction`	`(action: ImageAction, item: GeneratedImage) => void \| false`		Called for every action. For `download` the grid also saves the file, unless the handler returns `false`.
`actions`	`readonly ImageAction[]`	`ALL_ACTIONS`	Actions offered on tiles and in the viewer. Default: all.
`showDetails`	`boolean`	`false`	Details panel (prompt, seed, parameters, copy) beside the grid for the active image.
`pending`	`number`	`0`	Placeholder tiles while images are on their way (e.g. a running batch).
`renderPending`	`(index: number) => ReactNode`		Rendered inside each pending tile, e.g. a GenerationProgress overlay.
`emptyState`	`ReactNode`		Shown when there are no items and nothing pending, in place of `labels.empty`.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ImageResultGridLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Image Result Grid

Установка

Пропсы

Похожие компоненты