moonstone/ExpandableItem

Moonstone styled expandable item.

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

Members

ExpandableItemComponent

A component that 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

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';
Configuration
noPointerMode
Boolean

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

ExpandableItemBaseComponent

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
String

The primary text of the item.

autoClose
Boolean

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
Node

The contents of the expandable item displayed when open is true.

data-webos-voice-disabled
Boolean

Disables voice control.

data-webos-voice-group-label
String

The voice control group.

data-webos-voice-intent
String

The voice control intent.

data-webos-voice-label
String

The voice control label.

disabled
Boolean

Disables ExpandableItem and the control becomes non-interactive.

Default: false
label
Node

The secondary, or supportive text. Typically under the title, a subtitle.

lockBottom
Boolean

Prevents the user from moving Spotlight past the bottom of the expandable (when open) using 5-way controls.

Default: false
noneText
String

Text to display when no label or value is set.

onClose
Function

Called when a condition occurs which should cause the expandable to close.

onOpen
Function

Called when a condition occurs which should cause the expandable to open.

onSpotlightDisappear
Function

Called when the component is removed while retaining focus.

onSpotlightDown
Function

Called prior to focus leaving the expandable when the 5-way down key is pressed.

onSpotlightLeft
Function

Called prior to focus leaving the expandable when the 5-way left key is pressed.

onSpotlightRight
Function

Called prior to focus leaving the expandable when the 5-way right key is pressed.

onSpotlightUp
Function

Called prior to focus leaving the expandable when the 5-way up key is pressed.

open
Boolean

Opens ExpandableItem with the contents visible.

Default: false
showLabel
String

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
Boolean

Disables spotlight navigation into the component.

Default: false
ArrayBooleanFunctionModuleNumberObjectString