enact logoEnact
Edit on GitHub

sandstone/IconItem

Provides Sandstone styled icon item components and behaviors.

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

Members

IconItemComponent

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

Usage:

<IconItem
  background="#1b1b1b"
  bordered
  icon="usb"
/>
See: sandstone/IconItem.IconItemBase
import IconItem from '@enact/sandstone/IconItem';

IconItemBaseComponent

A Sandstone styled base component for IconItem.

import {IconItemBase} from '@enact/sandstone/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(http://example.com/image.png) center / cover'

bordered
Boolean

Specifies bordered or borderless.

children
Component

The custom component rendred 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, Icon will be shown as the content.

See: ui/Icon.Icon.children
image
sandstone/IconItem.ImageShape

Source and size for the image. See the datails in 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'

IconItemDecoratorHigher-Order Component

Sandstone-specific IconItem behaviors to apply to IconItem.

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

Type Definitions

ImageShapeObject

The shape for image of IconItem.

size •
Object

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

  • height - The height of the image

  • width - The width of the image

src •
StringObject

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

ArrayBooleanFunctionModuleNumberObjectString