Skip to content
Enact

limestone/FlexiblePopupPanels

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

An instance of limestone/Panelslimestone/Panels.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.

Properties
'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'

Called when the index value is changed.


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

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


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

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


'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'

A header component for FlexiblePopupPanels.Panel with a title and subtitle, supporting several configurable ui/Slottableui/Slottable.Slottable for components.

Extends: limestone/Panelslimestone/Panels.Header

Properties

Hint string read when focusing the application close button.

Default: 'Exit app'

'opaque''transparent'

Background opacity of the application close button.

Default: 'transparent'

Omits the close button.

Default: false

Called when the app close button is clicked.

The standard view container used inside a limestone/FlexiblePopupPanelslimestone/FlexiblePopupPanels.FlexiblePopupPanels view manager instance.

Extends: limestone/Panelslimestone/Panels.Panel

Properties
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 limestone/FlexiblePopupPanelslimestone/FlexiblePopupPanels.FlexiblePopupPanels.nextButtonVisibility.

Example:

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

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 limestone/FlexiblePopupPanelslimestone/FlexiblePopupPanels.FlexiblePopupPanels.prevButtonVisibility.

Example:

prevButton={<Button icon="closex" aria-label="Back">Back</Button>}

'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'