enact logoEnact
Edit on GitHub

moonstone/GridListImageItem

Provides Moonstone styled grid list image item components and behaviors.

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

Members

GridListImageItemComponent

A moonstone-styled grid list image item, Marquee and Spottable applied.

Usage:

<GridListImageItem
	caption="image0"
	source="http://via.placeholder.com/300x300/9037ab/ffffff/png?text=Image0"
	subCaption="sub-image0"
/>
See: moonstone/GridListImageItem.GridListImageItemBase
import GridListImageItem from '@enact/moonstone/GridListImageItem';

GridListImageItemBaseComponent

A Moonstone styled base component for GridListImageItem.

import {GridListImageItemBase} from '@enact/moonstone/GridListImageItem';
Properties
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

data-webos-voice-intent
String

The voice control intent.

Default: 'Select'
placeholder
String

Placeholder image used while source is loaded.

Default: An image
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.

Usage:

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

<GridListImageItem selectionOverlay={SelectionOverlay} />

GridListImageItemDecoratorHigher-Order Component

Moonstone-specific GridListImageItem behaviors to apply to GridListImageItem.

import {GridListImageItemDecorator} from '@enact/moonstone/GridListImageItem';
ArrayBooleanFunctionModuleNumberObjectString