ui/ Slot Item
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
The type of component to use to render the item.
This component will receive the
inline
prop and any additional unhandled props provided toSlotItem
. A derivative of Item is recommended.Controls the visibility state of the slots.
One, both, or neither slot can be shown. Choosing
'after'
will leaveslotBefore
visible at all times; onlyslotAfter
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, thehidden
class must be tied to another condition such as focus..slot.hidden:not(:focus) { display: none; }
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 nameslot
- Applied to both slotsafter
- Applied to the slot that falls after the contentbefore
- Applied to the slot that falls before the contenthidden
- Applied to a slot when that slot is supposed to be hidden, according toautoHide
prop
Applies inline styling to the component.
Default: falseThe layout technique for
SlotItem
."flex"
is applied as a default and gives basic flex support to the wrapping elements. This may be set tonull
to define your own layout method.Default: 'flex'Nodes to be inserted after
children
and hidden usingautoHide
.If nothing is specified, nothing, not even an empty container, is rendered in this place.
Nodes to be inserted before
children
and hidden usingautoHide
.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';