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
The node to be displayed as the main content of the item.
- component
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
Applies a disabled visual state to the item.
Default: false- inline
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
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
Controls the visibility state of the overlays. One, both, or neither overlay can be shown when the item is focused. Choosing
'after'
will leaveoverlayBefore
visible at all times; onlyoverlayAfter
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
A node which will be displayed at the end of the item. Typically this will be an icon or multiple icons.
- overlayBefore
A node which will be displayed at the beginning of the item. Typically this will be an icon or multiple icons.