Enact
Edit on GitHub

sandstone/FlexiblePopupPanels

Provides a Sandstone styled flexible-width, popup-styled Panels component.

import FlexiblePopupPanels from '@enact/sandstone/FlexiblePopupPanels';

Members

FlexiblePopupPanelsComponent

An instance of Panels which restricts the Panel to the left or right side of the screen inside a popup. This panel flexes both horizontally and vertically, with the Header positioned outside the Panel background area. This is typically used for a single setting or control at a time, for maximum background area viewing.

import FlexiblePopupPanels from '@enact/sandstone/FlexiblePopupPanels';
Statics
Header
Panel
Properties
nextButtonVisibility
'auto''always''never'

Specifies when and how to show nextButton on FlexiblePopupPanels.Panel.

  • 'auto' will display the nextButton if more than one FlexiblePopupPanels.Panel exists

  • 'always' will always display the nextButton

  • 'never' will always hide the nextButton

Note, children values will override the generalized parent visibility settings. In this case, a customized nextButton on FlexiblePopupPanels.Panel will take precedence over the nextButtonVisibility value.

Default: 'auto'
onChange
Function

Called when the index value is changed.

onNextClick
Function

Called when the next button is clicked in FlexiblePopupPanels.Panel.

Calling preventDefault on the passed event will prevent advancing to the next panel.

onPrevClick
Function

Called when the previous button is clicked in FlexiblePopupPanels.Panel.

Calling preventDefault on the passed event will prevent navigation to the previous panel.

prevButtonVisibility
'auto''always''never'

Specifies when and how to show prevButton on FlexiblePopupPanels.Panel.

  • 'auto' will display the prevButton if more than one FlexiblePopupPanels.Panel exists

  • 'always' will always display the prevButton

  • 'never' will always hide the prevButton

Note, children values will override the generalized parent visibility settings. In this case, if user provides a customized prevButton on FlexiblePopupPanels.Panel will take precedence over the prevButtonVisibility value.

Default: 'auto'

HeaderComponent

A header component for FlexiblePopupPanels.Panel with a title and subtitle, supporting several configurable slots for components.

import {Header} from '@enact/sandstone/FlexiblePopupPanels';
Properties
closeButtonAriaLabel
String

Hint string read when focusing the application close button.

Default: 'Exit app'
closeButtonBackgroundOpacity
'opaque''transparent'

Background opacity of the application close button.

Default: 'transparent'
noCloseButton
Boolean

Omits the close button.

Default: false
onClose
Function

Called when the app close button is clicked.

PanelComponent

The standard view container used inside a FlexiblePopupPanels view manager instance.

import {Panel} from '@enact/sandstone/FlexiblePopupPanels';
Properties
nextButton
BooleanComponent

The button to use in place of the standard next button.

This prop accepts a component (e.g. Button), a component instance or a boolean value.

If false, the button will not show. If set to a component, or true, the button will show. This will override the setting of nextButtonVisibility.

Example:

nextButton={<Button icon="closex" aria-label="Quit">Close</Button>}
prevButton
BooleanComponent

The button to use in place of the standard prev button.

This prop accepts a component (e.g. Button), a component instance or a boolean value.

If false, the button will not show. If set to a component, or true, the button will show. This will override the setting of prevButtonVisibility.

Example:

prevButton={<Button icon="closex" aria-label="Back">Back</Button>}
size
'auto''small''large'

Sets a pre-determined width on this panel.

The 'auto' value will attempt to adjust the panel size to the content size. Note: the title may not match in width.

Default: 'auto'
ArrayBooleanFunctionModuleNumberObjectString