Enact

moonstone/GridListImageItem

import GridListImageItem from '@enact/moonstone/GridListImageItem';

Members

GridListImageItemComponent

moonstone/GridListImageItem.GridListImageItem is a GridListImageItem with Moonstone styling, Marquee and Spottable applied.

Usage:

<GridListImageItem source="http://placehold.it/300x300/9037ab/ffffff&text=Image0" caption="image0" subCaption="sub-image0" />
import GridListImageItem from '@enact/moonstone/GridListImageItem';

GridListImageItemBaseComponent

moonstone/GridListImageItem.GridListImageItemBase is a stateless GridListImageItem with Moonstone styling applied.

import {GridListImageItemBase} from '@enact/moonstone/GridListImageItem';
Properties
source •
String

The absolute URL path to the image.

caption
String

The primary caption to be displayed with the image.

placeholder
String

Placeholder image used while source is loaded.

Default: An image
selected
Boolean

When true, applies a selected visual effect to the image, but only if selectionOverlayShowing is also true.

Default: false
selectionOverlay
Function

The custom selection overlay component to render. A component can be a stateless functional component, kind() or React component. The following is an example with custom selection overlay kind.

Example Usage:

const SelectionOverlay = kind({
	render: () => <div>custom overlay</div>
});

<GridListImageItemBase selectionOverlay={SelectionOverlay} />
selectionOverlayShowing
Boolean

When true, a selection overlay with a centered icon is shown. When selected is true, a check mark is shown.

Default: false
subCaption
String

The second caption line to be displayed with the image.

ArrayBooleanFunctionModuleNumberObjectString