Skip to main content

AssetGallery

AssetGallery​

@vendure/dashboardasset-gallery.tsx

A component for displaying a gallery of assets.

Example

 <AssetGallery
  onSelect={handleAssetSelect}
  multiSelect="manual"
  initialSelectedAssets={initialSelectedAssets}
  fixedHeight={false}
  displayBulkActions={false}
  />
Signature
function AssetGallery(props: AssetGalleryProps): void

Parameters

props​

parameter
AssetGalleryProps

AssetGalleryProps​

@vendure/dashboardasset-gallery.tsx

Props for the AssetGallery component.

Signature
interface AssetGalleryProps {
    onSelect?: (assets: Asset[]) => void;
    selectable?: boolean;
    multiSelect?: 'auto' | 'manual';
    initialSelectedAssets?: Asset[];
    pageSize?: number;
    fixedHeight?: boolean;
    showHeader?: boolean;
    className?: string;
    onFilesDropped?: (files: File[]) => void;
    bulkActions?: AssetBulkAction[];
    displayBulkActions?: boolean;
    onPageSizeChange?: (pageSize: number) => void;
}

onSelect​

property
(assets: Asset[]) => void

selectable​

property
boolean

multiSelect​

property
'auto' | 'manual'

Defines whether multiple assets can be selected.

If set to 'auto', the asset selection will be toggled when the user clicks on an asset. If set to 'manual', multiple selection will occur only if the user holds down the control/cmd key.

initialSelectedAssets​

property
Asset[]

The initial assets that should be selected.

pageSize​

property
number

The number of assets to display per page.

fixedHeight​

property
boolean

Whether the gallery should have a fixed height.

showHeader​

property
boolean

Whether the gallery should show a header.

className​

property
string

The class name to apply to the gallery.

onFilesDropped​

property
(files: File[]) => void

The function to call when files are dropped.

bulkActions​

property
AssetBulkAction[]

The bulk actions to display in the gallery.

displayBulkActions​

property
boolean

Whether the gallery should display bulk actions.

onPageSizeChange​

property
(pageSize: number) => void

The function to call when the page size changes.