sandstone/Item

Provides Sandstone styled item components and behaviors. Useful for content in lists.

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

Members

ItemComponent

A Sandstone styled item with built-in support for marqueed text, and Spotlight focus.

Usage:

<Item>Item Content</Item>
import Item from '@enact/sandstone/Item';

ItemBaseComponent

A Sandstone styled item without any behavior.

import {ItemBase} from '@enact/sandstone/Item';
Properties
centered
Boolean

Centers the slots and content.

componentRef
ObjectFunction

Called with a reference to the root component.

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:

  • item - The root class name

  • slotBefore - The slot (container) preceding the text of this component

  • slotAfter - The slot (container) following the text of this component

  • selected - Applied to a selected button

disabled
Boolean

Applies a disabled style and the control becomes non-interactive.

inline
Boolean

Applies inline styling to the item.

label
Node

The label to be displayed along with the text.

labelPosition
'above''after''before''below'

The position of the label relative to the primary content, children.

marqueeOn
'focus''hover''render'

Determines what triggers the marquee to start its animation.

slotAfter
Node

Nodes to be inserted after children.

For LTR locales, the nodes are inserted to the right of the primary content. For RTL locales, the nodes are inserted to the left. If nothing is specified, nothing, not even an empty container, is rendered in this place.

slotBefore
Node

Nodes to be inserted before children and label.

For LTR locales, the nodes are inserted to the left of the primary content. For RTL locales, the nodes are inserted to the right. If nothing is specified, nothing, not even an empty container, is rendered in this place.

ItemDecoratorHigher-Order Component

Sandstone specific item behaviors to apply to Item.

import {ItemDecorator} from '@enact/sandstone/Item';
ArrayBooleanFunctionModuleNumberObjectString