Overlay

The Overlay component is used to show an overlay and a button to open the overlay.

Dependencies: the system uses functions of the monsterjs library

You can create this control either by specifying the HTML tagdirectly in the HTML or using Javascript via thedocument.createElement('monster-overlay');` method.

<monster-overlay></monster-overlay>

Or you can create this CustomControl directly in Javascript:

import '@schukai/component-state/source/overlay.mjs';
document.createElement('monster-overlay');

The Body should have a class "hidden" to ensure that the styles are applied correctly.

body.hidden {
   visibility: hidden;
}

Constructor

new Overlay()

A simple overlay component

Copyright
  • schukai GmbH
Fires:

Members

defaults

To set the options via the html tag the attribute data-monster-options must be used.

To set the options via the html tag the attribute data-monster-options must be used.

Properties
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

containerObject

Container definitions

containerarray

Container definitions

container[].namestring

Name of the container

container[].contentstring

Content of the container

container[].classstring

Css class of the container

classesObject

Css classes

Properties
NameTypeDescription
bodystring

Css class to hide the body. This class is removed when the component is ready.

overlaystring

Css class to hide the overlay. This class is removed when the component is ready.

featuresObject

Feature definitions

Properties
NameTypeDescription
escapeKeyboolean

If true the overlay can be closed with the escape key

See

Methods

assembleMethodSymbol() → {Monster.Components.Host.Overlay}

Returns:
Type: 
Monster.Components.Host.Overlay

close() → {Monster.Components.Host.Overlay}

Returns:
Type: 
Monster.Components.Host.Overlay

open() → {Monster.Components.Host.Overlay}

Fires:
Returns:
Type: 
Monster.Components.Host.Overlay

toggle() → {Monster.Components.Host.Overlay}

Returns:
Type: 
Monster.Components.Host.Overlay

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string

Events

event:monster-overlay-before-close

This event is fired before the overlay is closed.

This event is fired before the overlay is closed. The event is fired on the overlay opener element.

Type:
  • object

event:monster-overlay-before-open

This event is fired before the overlay is opened.

This event is fired before the overlay is opened. The event is fired on the overlay opener element.

Type:
  • object

event:monster-overlay-closed

This event is fired after the overlay is closed.

This event is fired after the overlay is closed. The event is fired on the overlay opener element.

Type:
  • object

event:monster-overlay-opened

This event is fired after the overlay is opened.

This event is fired after the overlay is opened. The event is fired on the overlay opener element.

Type:
  • object