web-packages / web_overlay

This package provides the foundation to implement overlay elements that take overflow-considered.

Web Overlay Layout

Version	v1.0.0-alpha1

This package provides the foundation to implement overlay elements that take overflow-considered.

Preview

How to add overlay to target element.

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.

When only required properties.

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
});

When adding options about overlay.

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
        },
    }
});