Directory

← Back

Granite Alert

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

Author

Contributors

Rating

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>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Initial release supporting Vaadin 14+ Npm mode

Released
2020-04-13
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 13 in 1.0.0
Vaadin 12 in 1.0.0
Vaadin 11 in 1.0.0
Vaadin 10 in 1.0.0
Browser
Browser Independent

Granite Alert - Vaadin Add-on Directory

Vaadin global notifications (wrapper for https://github.com/LostInBrittany/granite-alert with themable support) Granite Alert - Vaadin Add-on Directory
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](https://vaadin.com/directory/component/granite-alert/samples))
Online