Skip to content

EnOverlay

Preview

Props

NameDescriptionDefaultControl
qaId

Id that can be set for automation selectors.

string
""
title

Sets the title in the overlay header.

string
""
showFooter

Renders the overlay footer and footer slot.

boolean
true
canClose

Allows the overlay to be closed using the close buttons.

boolean
true
closeOnClickOutside

Allows the maximized overlay to be closed by clicking the backdrop. Set to false to keep the overlay open while maximized (the dimmed backdrop still blocks interaction with the page behind, like a modal). The close button and Escape key are unaffected by this prop.

boolean
true
bodyScroll

Applies a scrollbar to the body of the overlay when the content gets too long.

boolean
false
showOverlay

Displays the overlay. Should be controlled outside of the overlay component.

boolean
false
maximizeOnOpen

Default overlay to be maximized when opened.

boolean
false
minimizedPosition
string
"left"
allowHide

Renders a hide button in the header. Clicking it collapses the overlay into a small bar anchored to the bottom-left corner showing only the title. Clicking the bar maximizes the overlay again.

boolean
false
hideTitle

Title shown in the collapsed bar when the overlay is hidden. Falls back to the title prop when not provided.

string
""

Slots

header

No description

title

No description

content

No description

body

No description

footer

No description

Events

close

Close event.

open

Open event.

maximized

No description

minimized

No description

end-drag

Drag has stopped event.

hide

Hide event. Fires when the overlay is collapsed to the bar. Use this to pause embedded media (e.g. video) while keeping it mounted.

show

Show event. Fires when the overlay is restored from the collapsed bar. Use this to resume embedded media.

Methods

No methods defined.