Granite Alert

Vaadin global notifications (wrapper for https://github.com/LostInBrittany/granite-alert with themable support)

View larger

Close

GraniteAlert is a container for other components, which are rendered inside the alert, and can be used as a way of displaying a global notification. The property level maps to the level attribute of granite-alert, with each level (info, warning, error and success) providing a different style. The property compact enables additional style rules that reduce spacing around the content.

It is also posible to injecting styles directly into the granite-alert shadow DOM, by using style modules (see examples)

Sample code

GraniteAlert alert = new GraniteAlert();
alert.setCompact(true);
alert.setLevel(GraniteAlertLevel.SUCCESS);
alert.add(new Span("Success!"));

<dom-module id="custom-granite-alert-theme" theme-for="granite-alert">
  <template>
    <style>
        :host(.custom) .alert {
            color: var(--lumo-body-text-color);
            background-color: white;
            border-color: grey;
        }
    </style>
  </template>
</dom-module>

Links

• View on GitHub
• Author Homepage
• Source Code
• Issue tracker
• Online Demo

Compatibility