Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Toaster

Toaster is a kind of overlayer coming from the left edge of the screen on desktop and from the bottom edge on mobile.

last modified: 17/03/2022 12:00:04
Accessibility
  • rs-toaster section must have role="dialog" attribute;
  • rs-toaster section must have aria-describedby="ac-toaster-label" with the id of the toaster title;
  • rs-tmline-indicator-el which has a number inside needs a second <span> with an explicite aria-label attribute.
How does it work

Toaster is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.toaster" attribute to work.

Default toaster

The toaster section has a rs-toaster class and must have an id="ac-toaster-positive" to run the JavaScript.

The toaster is opened by a <button> with the jsrs-toaster class + data-toaster-id="ac-toaster-positive" attribute with the toaster section id to run the JavaScript.

Negative toaster

Add rs-toaster-neg to rs-toaster .

Attention

Be careful this negative component doesn't take care of the element inside it. You have to add negative classes on your elements inside the negative toaster.

JavaScript

How to trigger the js

As Toaster is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Toaster to the page, you have to call this JS: inception.toaster(CONTEXT);

CONTEXT refers to document or html element parent.

Dispatched event

Toaster has dispatch event that you can trigger

  • Open: element.addEventListener('inception.toaster.open', fn). What you write inside fn of your eventListener will be triggered when the toaster is opening.
  • Opened: element.addEventListener('inception.toaster.opened', fn). What you write inside fn of your eventListener will be triggered when the toaster is opened.
  • Close: element.addEventListener('inception.toaster.close', fn). What you write inside fn of your eventListener will be triggered when the toaster is closing.
  • Closed: element.addEventListener('inception.toaster.closed', fn). What you write inside fn of your eventListener will be triggered when the toaster is closed.