limestone/IconItem

Provides Limestone styled icon item components and behaviors.

Loading Live Preview

Import Usage

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

Members

IconItem   Component

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

Usage:

<IconItem
  background="#1b1b1b"
  bordered
  icon="usb"
/>

Import Usage

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

Extends: limestone/IconItemlimestone/IconItem.IconItemBase
Wrapped with: limestone/IconItemlimestone/IconItem.IconItemDecorator

IconItemBase   Component

A Limestone styled base component for limestone/IconItemlimestone/IconItem.IconItem.

Import Usage

import {IconItemBase} from '@enact/limestone/IconItem';

Properties

background

String

The background color, gradient, or image of this item. Accepts any format of color, gradient type value, and image url.

Example: '#ff0000', 'radial-gradient(crimson, skyblue)', 'url(https://examplehttps://example.com/image.png) center / cover'

---

bordered

Boolean

Specifies bordered or borderless.

---

children

Component

The custom component rendered as the content of this IconItem.

---

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:

• iconItem - The icon item component class

• content - The class for the content area except title

• bordered - The border class

• icon - The icon component class

• image - The image component class

• labelContainer - The label container class

• label - The label component class

• title - The title component class

---

data-webos-voice-intent

String

The voice control intent.

Default: 'Select'

---

disabled

Boolean

Disable IconItem and becomes non-interactive.

---

icon

StringObject

The icon content. If this is specified, limestone/Iconlimestone/Icon.Icon will be shown as the content.

See: ui/Iconui/Icon.Icon.children

---

image

limestone/IconItem.ImageShape

Source and size for the image. See the details in limestone/IconItemlimestone/IconItem.ImageShape

---

label

String

A label displayed in the content.

---

labelColor

'dark''light'

The color of label.

Default: 'light'

---

labelOn

'focus''render'

Determines what triggers the label to show.

Default: 'render'

---

title

String

Title text showing below the icon.

---

titleOn

'focus''render'

Determines what triggers the title to show.

Default: 'render'

IconItemDecorator   Higher-Order Component

Limestone-specific IconItem behaviors to apply to limestone/IconItemlimestone/IconItem.IconItem.

Import Usage

import {IconItemDecorator} from '@enact/limestone/IconItem';

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

Type Definitions

ImageShape   Object

The shape for image of limestone/IconItemlimestone/IconItem.

Required Property • size

Object

Size for the image. The following properties should be provided:

• height - The height of the image

• width - The width of the image

---

Required Property • src

String | Object

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