Version:

Install ​

shell
npm i @vaadin/notification

Import ​

javascript
import '@vaadin/notification';

Variants ​

Information ​

html
<vaadin-notification position="top-center"></vaadin-notification>
javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Sie verwenden nun die Softwareversion 2.0.</p>`;
document.querySelector('vaadin-notification').duration = 5000;
document.querySelector('vaadin-notification').opened = true;

Success ​

html
<vaadin-notification theme="success" position="top-center"></vaadin-notification>
javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Der Datensatz wurde gespeichert.</p>`;
document.querySelector('vaadin-notification').duration = 5000;
document.querySelector('vaadin-notification').opened = true;

Warning ​

html
<vaadin-notification theme="warning" position="top-center"></vaadin-notification>
javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Ihr Passwort läuft in 5 Tagen ab.</p>`;
document.querySelector('vaadin-notification').duration = 5000;
document.querySelector('vaadin-notification').opened = true;

Error ​

html
<vaadin-notification theme="error" position="top-center"></vaadin-notification>
javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Der Datensatz konnte nicht gespeichert werden.</p>`;
document.querySelector('vaadin-notification').duration = 0;
document.querySelector('vaadin-notification').opened = true;