moonstone/ Expandable Item
Exports the moonstone/ExpandableItem.ExpandableItem and moonstone/ExpandableItem.ExpandableItemBase components and moonstone/ExpandableItem.Expandable Higher-Order Component (HOC). The default export is moonstone/ExpandableItem.ExpandableItem.
import ExpandableItem from '@enact/moonstone/ExpandableItem';
Members
ExpandableItemComponent
moonstone/ExpandableItem.ExpandableItem renders a moonstone/LabeledItem.LabeledItem that can be expanded to show additional contents.
ExpandableItem
maintains its open/closed state by default. The initial state can be supplied
using defaultOpen
. In order to directly control the open/closed state, supply a value for
open
at creation time and update its value in response to onClose
/onOpen
events.
import ExpandableItem from '@enact/moonstone/ExpandableItem';
ExpandableHigher-Order Component
moonstone/ExpandableItem.Expandable manages the open state of a component
and adds ui/Cancelable.Cancelable support to call the onClose
handler on
cancel.
import {Expandable} from '@enact/moonstone/ExpandableItem';
Configuration
- noPointerMode
When
true
and used in conjunction withnoAutoFocus
whenfalse
, the contents of the container will receive spotlight focus expanded, even in pointer mode.Default: false
ExpandableItemBaseComponent
moonstone/ExpandableItem.ExpandableItemBase is a stateless component that renders a moonstone/LabeledItem.LabeledItem that can be expanded to show additional contents.
import {ExpandableItemBase} from '@enact/moonstone/ExpandableItem';
Properties
- title •
The primary text of the item.
- autoClose
When
true
, the expandable automatically closes when the user navigates to thetitle
of the component using 5-way controls; iffalse
, the user must select/tap the header to close the expandable.Default: false- children
The contents of the expandable item displayed when
open
istrue
- disabled
When
true
, applies a disabled style and the control becomes non-interactive.Default: false- label
The secondary, or supportive text. Typically under the
title
, a subtitle.- lockBottom
When
true
, the user is prevented from moving {@glossary Spotlight} past the bottom of the expandable (when open) using 5-way controls.Default: false- noneText
Text to display when no
label
orvalue
is set.- onClose
Callback to be called when a condition occurs which should cause the expandable to close
- onOpen
Callback to be called when a condition occurs which should cause the expandable to open
- onSpotlightDisappear
The handler to run when the component is removed while retaining focus.
- onSpotlightDown
The handler to run prior to focus leaving the expandable when the 5-way down key is pressed.
- onSpotlightLeft
The handler to run prior to focus leaving the expandable when the 5-way left key is pressed.
- onSpotlightRight
The handler to run prior to focus leaving the expandable when the 5-way right key is pressed.
- onSpotlightUp
The handler to run prior to focus leaving the expandable when the 5-way up key is pressed.
- open
When
true
, the control is rendered in the expanded state, with the contents visibleDefault: false- showLabel
Controls when
label
is shown.'always'
- The label is always visible'never'
- The label is never visible'auto'
- The label is visible when the expandable is closed
Default: 'auto'- spotlightDisabled
When
true
, the component cannot be navigated using spotlight.Default: false