content-overlay
Description
A content overlay is a dialog modal that is triggered to launch. A content overlay can either take over the entire screen or just the module it is contained within.
Benefits
Can display a variety of content, such as revealing content in current position, overtaking another content, or overtaking the screen.
Accessibility
Fully keyboard accessible and maintains focus in full screen mode. All overlays can be closed with the Escape key. Built in accordance to the
W3 Dialog Modal ExampleProperties
| Property |
Attribute |
Description |
Type |
Default |
closeTitle |
close-title |
Title attribute value for the close button. |
string |
'Close Overlay' |
fullScreen |
full-screen |
|
string |
'true' |
horizontalAlignment |
horizontal-alignment |
A pipe delimited setting for horizontal alignment. This only applies when fullscreen mode is activated. |
string |
'center' |
styleClass |
style-class |
|
string |
undefined |
target |
target |
|
string |
undefined |
verticalAlignment |
vertical-alignment |
A pipe delimited setting for vertical alignment. This only applies when fullscreen mode is activated. |
string |
'center' |
Events
| Event |
Description |
Type |
contentOverlayActivated |
|
CustomEvent<HTMLElement> |
Slots
| Slot |
Description |
"closeButton" |
Contents of the that will close the overlay when triggered. |
"content" |
Contents that sit inside the overlay. |
"header" |
This is adjacent to the close button, usually a header or title for the overlay. |