moonstone/ExpandableItem

Moonstone styled expandable item.

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

Members

ExpandableItem`Component`

A component that renders a 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';

Extends: moonstone/ExpandableItem.ExpandableItemBase

Wrapped with: moonstone/ExpandableItem.Expandable

Expandable`Higher-Order Component`

A higher-order component that 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';

Includes: ui/Toggleable.Toggleable

Includes: ui/RadioDecorator.RadioDecorator

Includes: ui/Cancelable.Cancelable

Configuration

noPointerMode: When true and used in conjunction with noAutoFocus when false, the contents of the container will receive spotlight focus expanded, even in pointer mode.
Default: false

ExpandableItemBase`Component`

A stateless component that renders a LabeledItem that can be expanded to show additional contents.

import {ExpandableItemBase} from '@enact/moonstone/ExpandableItem';

Properties

title •: The primary text of the item.
autoClose: Closes the expandable automatically when the user navigates to the title of the component using 5-way controls; if false, the user must select/tap the title to close the expandable.
Default: false
children: The contents of the expandable item displayed when open is true.
data-webos-voice-disabled: Disables voice control.
data-webos-voice-group-label: The voice control group.
data-webos-voice-intent: The voice control intent.
data-webos-voice-label: The voice control label.
disabled: Disables ExpandableItem and the control becomes non-interactive.
Default: false
label: The secondary, or supportive text. Typically under the title, a subtitle.
lockBottom: Prevents the user from moving Spotlight past the bottom of the expandable (when open) using 5-way controls.
Default: false
noneText: Text to display when no label or value is set.
onClose: Called when a condition occurs which should cause the expandable to close.
onOpen: Called when a condition occurs which should cause the expandable to open.
onSpotlightDisappear: Called when the component is removed while retaining focus.
onSpotlightDown: Called prior to focus leaving the expandable when the 5-way down key is pressed.
onSpotlightLeft: Called prior to focus leaving the expandable when the 5-way left key is pressed.
onSpotlightRight: Called prior to focus leaving the expandable when the 5-way right key is pressed.
onSpotlightUp: Called prior to focus leaving the expandable when the 5-way up key is pressed.
open: Opens ExpandableItem with the contents visible.
Default: 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: Disables spotlight navigation into the component.
Default: false

Variable Types Key:ArrayBooleanFunctionModuleNumberObjectString