Enact

moonstone/Item

Exports the moonstone/Item.Item and moonstone/Item.ItemBase components.

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

Members

ItemComponent

moonstone/Item.Item is a focusable Moonstone-styled control that can display simple text or a set of controls.

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

ItemBaseComponent

moonstone/Item.ItemBase is a Moonstone-styled control that can display simple text or a set of controls. Most developers will want to use the spottable version: moonstone/Item.Item.

import {ItemBase} from '@enact/moonstone/Item';
Properties
children
Node

The node to be displayed as the main content of the item.

component
StringNode

The type of component to use to render the item. May be a DOM node name (e.g 'div', 'span', etc.) or a custom component.

Default: 'div'
disabled
Boolean

Applies a disabled visual state to the item.

Default: false
inline
Boolean

Applies inline styling to the item.

Default: false

ItemOverlayComponent❌

since 1.14.0. Will be replace by ui/SlotItem in 2.0.0

moonstone/Item.ItemOverlay is a focusable Moonstone-styled control that can display simple text or a set of controls along with overlays before and/or after the contents.

<ItemOverlay autoHide="both">
	<overlayBefore>
		<Icon>flag</Icon>
		<Icon>star</Icon>
	</overlayBefore>
	An Item that will show some icons before and after this text when spotted
	<Icon slot="overlayAfter">trash</Icon>
</ItemOverlay>
import {ItemOverlay} from '@enact/moonstone/Item';

OverlayComponent❌

since 1.14.0. Will be removed in 2.0.0

moonstone/Item.Overlay is the component inserted into each side of an moonstone/Item.ItemOverlay.

import {Overlay} from '@enact/moonstone/Item';
Properties
hidden
Boolean

When true, the component is no longer visually reprenested on screen.

Default: false

OverlayDecoratorHigher-Order Component❌

since 1.14.0. Will be removed in 2.0.0

moonstone/Item.OverlayDecorator is a Higher-order Component that adds overlayBefore and overlayAfter properties to add components before or after the usual text content of an Item. The visibility of each can be individually controlled via the autoHide property.

import {OverlayDecorator} from '@enact/moonstone/Item';
Properties added to wrapped component
autoHide
Boolean

Controls the visibility state of the overlays. One, both, or neither overlay can be shown when the item is focused. Choosing 'after' will leave overlayBefore visible at all times; only overlayAfter will have its visibility toggled on focus. Valid values are 'before', 'after' and 'both'. Omitting the property will result in no-auto-hiding for either overlay. They will both be present regardless of focus.

overlayAfter
Element

A node which will be displayed at the end of the item. Typically this will be an icon or multiple icons.

overlayBefore
Element

A node which will be displayed at the beginning of the item. Typically this will be an icon or multiple icons.

ArrayBooleanFunctionModuleNumberObjectString