limestone/Image

Provides Limestone styled Image component that supports multiple resolution sources.

Loading Live Preview

Import Usage

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

Members

Image   Component

A Limestone-styled image component

<Image
  src={{
    'hd': 'https://dummyimage.com/64/e048e0/0011ff',
    'fhd': 'https://dummyimage.com/128/e048e0/0011ff',
    'uhd': 'https://dummyimage.com/256/e048e0/0011ff'
  }}
>

Import Usage

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

Extends: limestone/Imagelimestone/Image.ImageBase
Wrapped with: limestone/Imagelimestone/Image.ImageDecorator

ImageBase   Component

A Limestone-styled image component without any behavior

Import Usage

import {ImageBase} from '@enact/limestone/Image';

Extends: ui/Imageui/Image.Image

Properties

componentRef

ObjectFunction

Called with a reference to the root component.

When using limestone/Imagelimestone/Image.Image, the ref prop is forwarded to this component as componentRef.

---

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:

• image - The root component class for Image

ImageDecorator   Higher-Order Component

Limestone-specific behaviors to apply to limestone/Imagelimestone/Image.ImageBase.

Import Usage

import {ImageDecorator} from '@enact/limestone/Image';

Includes: limestone/Skinnablelimestone/Skinnable.Skinnable