ESL Alert

ESLAlert is a component to show small notifications on your pages.

The ESLAlert instances are controlled via DOM events dispatched on the observed target. ESLAlert can have multiple instances on the page.


Usage

First, use the common approach to register component: ESLAlert.register(). Then you can attach <esl-alert> component to the expected place in the document or initialize it globally by using ESLAlert.init shortcut.

ESL Alert listens to DOM events to control its state. By default, the target to catch alerts is the esl-alert parent element. Target can be changed using target attribute with the ESLTraversingQuery support, or through the $target property that accepts any EventTarget instance (including the window).

ESL Alert listens to the following events:

Use CustomEvent details to customize alert. Alert details accepts the following properties:

If one of esl-alerts catches the activation event it will prevent its propagation to parent elements.

Example

<body>
  <div class="container">
    ...
    <my-component></my-component>
    ...
  </div>
  <esl-alert></esl-alert>
</body>
// my-component
this.dispatchEvent(new CustomEvent(`esl:alert:show`, {
  detail: {
    text: 'Hello World',
    cls: 'alert alert-info'
  }
}));