enact logoEnact
Edit on GitHub

ui/SlotItem

An unstyled item component that accepts multiple positions of children.

Using the usual children prop, as well as two additional props: slotBefore, and slotAfter. It is able to be customized by a theme or application.

import SlotItem from '@enact/ui/SlotItem';

Members

SlotItemComponent

A ui-styled item with built-in support for slots.

Example:

<SlotItem component={Item} autoHide="both">
	<slotBefore>
		<Icon>flag</Icon>
		<Icon>star</Icon>
	</slotBefore>
	An Item that will show some icons slotBefore and slotAfter this text when spotted
	<Icon slot="slotAfter">trash</Icon>
</SlotItem>
import SlotItem from '@enact/ui/SlotItem';

SlotItemBaseComponent

A ui-styled SlotItem without any behavior.

import {SlotItemBase} from '@enact/ui/SlotItem';
Properties
component •
Component

The type of component to use to render the item.

This component will receive the inline prop and any additional unhandled props provided to SlotItem. A derivative of Item is recommended.

autoHide
Boolean

Controls the visibility state of the slots.

One, both, or neither slot can be shown. Choosing 'after' will leave slotBefore visible at all times; only slotAfter will have its visibility toggled. Valid values are 'before', 'after' and 'both'. Omitting the property will result in no-auto-hiding for either slot so they will both be present.

In order for autoHide to have a visual affect, the hidden class must be tied to another condition such as focus.

.slot.hidden:not(:focus) {
  display: none;
}
componentRef
ObjectFunction

Called with a reference to the root component.

When using ui/SlotItem.SlotItem, the ref prop is forwarded to this component as componentRef.

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:

  • slotItem - The root class name

  • slot - Applied to both slots

  • after - Applied to the slot that falls after the content

  • before - Applied to the slot that falls before the content

  • hidden - Applied to a slot when that slot is supposed to be hidden, according to autoHide prop

inline
Boolean

Applies inline styling to the component.

Default: false
layout
String

The layout technique for SlotItem.

"flex" is applied as a default and gives basic flex support to the wrapping elements. This may be set to null to define your own layout method.

Default: 'flex'
slotAfter
Node

Nodes to be inserted after children and hidden using autoHide.

If nothing is specified, nothing, not even an empty container, is rendered in this place.

slotBefore
Node

Nodes to be inserted before children and hidden using autoHide.

If nothing is specified, nothing, not even an empty container, is rendered in this place.

SlotItemDecoratorHigher-Order Component

A ui-specific higher-order component (HOC) with slot behaviors to apply to SlotItem.

import {SlotItemDecorator} from '@enact/ui/SlotItem';
ArrayBooleanFunctionModuleNumberObjectString