limestone/ImageItem

Provides Limestone styled image item components and behaviors.

Loading Live Preview

Import Usage

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

Members

ImageItem   Component

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

Usage:

<ImageItem
  src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
  label="A secondary caption"
>
	The primary caption for the image
</ImageItem>

Import Usage

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

Extends: limestone/ImageItemlimestone/ImageItem.ImageItemBase
Wrapped with: limestone/ImageItemlimestone/ImageItem.ImageItemDecorator

ImageItemBase   Component

A Limestone styled base component for limestone/ImageItemlimestone/ImageItem.ImageItem.

Import Usage

import {ImageItemBase} from '@enact/limestone/ImageItem';

Extends: ui/ImageItemui/ImageItem.ImageItem

Properties

centered

Boolean

Centers the primary caption and label in vertical orientation.

---

children

StringNode

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

StringNode

A secondary caption displayed with the image.

---

orientation

'horizontal''vertical'

The layout orientation of the component.

Default: 'vertical'

---

placeholder

String

Placeholder image used while limestone/ImageItemlimestone/ImageItem.ImageItemBase.src is loaded.

Default: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' + '9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZT0iIzU1NSIgZmlsbD0iI2FhYSIg' + 'ZmlsbC1vcGFjaXR5PSIwLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iNiIgLz48L3N2Zz' + '4NCg=='

---

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.

---

wideImage

Boolean

Changes the image from a scale 1:1 to 16:9 in horizontal orientation.

Default: 'false'

ImageItemDecorator   Higher-Order Component

Limestone-specific ImageItem behaviors to apply to limestone/ImageItemlimestone/ImageItem.ImageItem.

Import Usage

import {ImageItemDecorator} from '@enact/limestone/ImageItem';

Includes: limestone/Marqueelimestone/Marquee.MarqueeController
Includes: spotlight/Spottablespotlight/Spottable.Spottable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable