sandstone/ImageItem

Provides Sandstone styled image item components and behaviors.

import ImageItem from '@enact/sandstone/ImageItem';

Members

ImageItemComponent

A sandstone-styled image item, Marquee and Spottable applied.

Usage:

<ImageItem
  src="http://placehold.it/100x100/9037ab/ffffff&text=Image0"
  label="A secondary caption"
>
	The primary caption for the image
</ImageItem>
import ImageItem from '@enact/sandstone/ImageItem';

ImageItemBaseComponent

A Sandstone styled base component for ImageItem.

import {ImageItemBase} from '@enact/sandstone/ImageItem';
Properties
centered
Boolean

Centers the primary caption and label in vertical orientation.

children
String

The primary caption displayed with the image.

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:

  • caption - The caption component class

  • fullImage - Applied when orientation prop is vertical without label and children

  • horizontal - Applied when orientation prop is horizontal

  • image - The image component class

  • imageIcon - The image icon component class

  • imageItem - The image item component class

  • label - The secondary caption component class

  • selected - Applied when selected prop is true

  • selectionIcon - The icon component class for default selection component

  • vertical - Applied when orientation prop is vertical

data-webos-voice-intent
String

The voice control intent.

Default: 'Select'
disabled
Boolean

Disable ImageItem and becomes non-interactive.

Default: false
label
String

A secondary caption displayed with the image.

orientation
'horizontal''vertical'

The layout orientation of the component.

Default: 'vertical'
placeholder
String

Placeholder image used while src is loaded.

Default: An image
selected
Boolean

Applies a selected visual effect to the image, but only if showSelection is also true.

selectionComponent
Function

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

Usage:

const SelectionComponent = kind({
	render: () => <div>custom selection component</div>
});

<ImageItem selectionComponent={SelectionComponent} />
showSelection
Boolean

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

src
StringObject

Source for the image. String value or Object of values used to determine which image will appear on a specific screenSize.

ImageItemDecoratorHigher-Order Component

Sandstone-specific ImageItem behaviors to apply to ImageItem.

import {ImageItemDecorator} from '@enact/sandstone/ImageItem';
ArrayBooleanFunctionModuleNumberObjectString