ui/GridListImageItem

Unstyled grid list image item components and behaviors to be customized by a theme or application.

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

Members

GridListImageItemComponent

A basic grid list image item without any behavior.

import GridListImageItem from '@enact/ui/GridListImageItem';
Properties
caption
String

The primary caption to be displayed with the image.

captionComponent
Component

The component used to render the captions

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.

The following classes are supported:

  • icon - The icon component class for default selection overlay

  • image - The image component class

  • selected - Applied when selected prop is true

  • caption - The caption component class

  • subCaption - The subCaption component class

iconComponent
Function

The component used to render the default check icon when selected. If there is custom selectionOverlay component, this icon will not be shown.

Default: ui/Icon.Icon
imageComponent
Function

The component used to render the image component

Default: ui/Image.Image
placeholder
String

Placeholder image used while source is loaded.

selected
Boolean

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:

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

<GridListImageItem selectionOverlay={SelectionOverlay} />
selectionOverlayShowing
Boolean

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

Default: false
source
String

The absolute URL path to the image.

subCaption
String

The second caption line to be displayed with the image.

ArrayBooleanFunctionModuleNumberObjectString