Enact

moonstone/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
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

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 •
String

The primary text of the item.

autoClose
Boolean

When true, the expandable automatically closes when the user navigates to the title of the component using 5-way controls; if false, the user must select/tap the header to close the expandable.

Default: false
children
Node

The contents of the expandable item displayed when open is true

disabled
Boolean

When true, applies a disabled style and the control becomes non-interactive.

Default: false
label
Node

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

lockBottom
Boolean

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
String

Text to display when no label or value is set.

onClose
Function

Callback to be called when a condition occurs which should cause the expandable to close

onOpen
Function

Callback to be called when a condition occurs which should cause the expandable to open

onSpotlightDisappear
Function

The handler to run when the component is removed while retaining focus.

onSpotlightDown
Function

The handler to run prior to focus leaving the expandable when the 5-way down key is pressed.

onSpotlightLeft
Function

The handler to run prior to focus leaving the expandable when the 5-way left key is pressed.

onSpotlightRight
Function

The handler to run prior to focus leaving the expandable when the 5-way right key is pressed.

onSpotlightUp
Function

The handler to run prior to focus leaving the expandable when the 5-way up key is pressed.

open
Boolean

When true, the control is rendered in the expanded state, 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

When true, the component cannot be navigated using spotlight.

Default: false
ArrayBooleanFunctionModuleNumberObjectString