limestone/Item

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

Loading Live Preview

Import Usage

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

Members

Item   Component

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

Usage:

<Item>Item Content</Item>

Import Usage

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

Extends: limestone/Itemlimestone/Item.ItemBase
Wrapped with: limestone/Itemlimestone/Item.ItemDecorator

ItemBase   Component

A Limestone styled item without any behavior.

Import Usage

import {ItemBase} from '@enact/limestone/Item';

Extends: ui/Itemui/Item.ItemBase

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.

---

slotAfterAria

String

Aria-label for slotAfter icon.

---

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.

---

slotBeforeAria

String

Aria-label for slotBefore icon.

ItemDecorator   Higher-Order Component

Limestone specific item behaviors to apply to limestone/Itemlimestone/Item.ItemBase.

Import Usage

import {ItemDecorator} from '@enact/limestone/Item';

Includes: ui/Itemui/Item.ItemDecorator
Includes: ui/Slottableui/Slottable.Slottable
Includes: spotlight/Spottablespotlight/Spottable.Spottable
Includes: limestone/Marqueelimestone/Marquee.MarqueeController
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable