esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

ESL Alert

Related Examples

  • Notification

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:

  • esl:alert:show to show alert
  • esl:alert:hide to hide alert

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

  • cls - to pass class or classes(separated by space) to add to alert inner.
  • text - to specify alert text content
  • html - to alternatively specify alert HTML content

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

ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko