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

backgroundColor

String

A color to render behind the image. Accepts any valid CSS background-color value (named color, hex, rgb(), etc.). Gradients are not supported here. They are CSS images, not colors; use backgroundSrc for an image background instead.

This is useful when src (or backgroundSrc) points to an image with transparent areas — set this to change what shows through those transparent regions. Changing this value dynamically (e.g. via state) will update what's visible behind the image without affecting the image itself.

---

backgroundSrc

StringObject

A second image to render behind the main src image.

This is useful when src points to an image with transparent areas — this image will show through those transparent regions, layered above backgroundColor and placeholder but below src. Accepts the same string or screen-size-keyed object format as src.

---

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