@lion/overlays

Overlays System

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

Supports different types of overlays like dialogs, toasts, tooltips, dropdown, etc... Manages their position on the screen relative to other elements, including other overlays.

Overlays manager

This is a global singleton needed to manage positions of multiple dialogs next to each other on the entire page. It does the job automatically, but you need to add every newly created overlay to it using the code provided below:

How to use

Installation

npm i --save @lion/ajax

Example

import { overlays } from '@lion/overlays';

const myCtrl = overlays.add(
  new OverlayTypeController({
    /* options */
  })
);
// name OverlayTypeController is for illustration purpose only
// please read below about existing classes for different types of overlays

GlobalOverlayController

This is a base class for different global overlays (e.g. a dialog) - the ones positioned relatively to the viewport. You should not use this controller directly unless you want to create a unique type of global overlays which is not supported out of the box.

All supported types of global overlays are described below.

ModalDialogController

import { ModalDialogController } from '@lion/overlays';

This is an extension of GlobalOverlayController configured to create accessible modal dialogs.

LocalOverlayController

This is a base class for different local overlays (e.g. a tooltip) - the ones positioned next to invokers they are related to. You should not use this controller directly unless you want to create a unique type of local overlays which is not supported out of the box.

All supported types of local overlays are described below.

This is currently WIP. Stay tuned for updates on new types of overlays.