This package provides the foundation to implement overlay elements that take overflow-considered.
This when you want to attach an overlay element to a specific element rather than a specific static position by calling to Overlay.attach
function.
The example below define only required values to adding the overlay element to the target element.
const overlay = ...;
const overlayTarget = ...;
Overlay.attach({
element: overlay,
target: overlayTarget,
parent: overlayTarget.parentElement, // default is body
});
The example below define behaviors in the behavior
that is properties key.
Overlay.attach({
...,
behavior: {
viewportPadding: 15,
targetGap: 10,
direction: OverlayDirection.BOTTOM_CENTER,
// Define how to correct overflowed.
alignment: OverlayAlignment.ALL,
// Define how to correct overflowed by direction.
alignment: {
horizontal: OverlayAlignment.ALL,
vertical: OverlayAlignment.SIZE
},
}
});