Contact us Create app

Directory

← Back

Granite Alert

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

Author

Contributors

Rating

Links

Popularity

<100

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)

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

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...)

Last updated: 2020-04-13

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

Speed Dial - Vaadin Add-on Directory

A material design - floating action button with speed dial Speed Dial - Vaadin Add-on Directory
\u0000[![Vaadin-14](https://img.shields.io/badge/Vaadin-14.1.5-blue.svg?style=flat)](https://vaadin.com/)\n[![Polymerl](https://img.shields.io/badge/Polymer-3.0-FF4470.svg)](https://www.webcomponents.org/element/@cwmr/paper-fab-speed-dial)\n[![Github](https://img.shields.io/badge/Sources-GitHub-181717.svg)](https://github.com/TobseF/vaadin-speed-dial)\n[![Published on Maven Central](https://img.shields.io/badge/Maven_Central-published-00b4f0.svg)](https://search.maven.org/artifact/io.github.tobsef/speed-dial/1.1.4/jar)\n\n\n\nVaadin 14 Java integration of [@polymer/paper-fab-speed-dial](https://www.webcomponents.org/element/@cwmr/paper-fab-speed-dial). \n\n**Features** \n\u2B50 Floating menu bar \n\u2B50 Build in support of [Vaadin Icons](https://vaadin.com/components/vaadin-icons) \n\u2B50 Backdrop to darken the background on open \n\u2B50 Setters for all 11 CSS properties \n\u2B50 Server side ClickListener \n\u2B50 Server side `close` and `open` actions \n\u2B50 Up to date Polymer 3.0 \n\u00A0 \nAdd it as dependency - It's available on the [Central Maven Repository](https://search.maven.org/artifact/io.github.tobsef/speed-dial/1.1.4/jar):\n``` xml\n\n io.github.tobsef\n speed-dial\n 1.1.4\n\n```\n**Current Version**: `1.1.4` \nPlease make sure you use the current version from Maven. Don't use the outdated \"install with zip\" from vaadin directory. The file upload on the [Vaadin directory is broken](https://vaadin.com/forum/thread/18044275/saving-a-component-in-the-add-on-directory-after-a-new-version-upload-is-br)!\n\nAdd it to your View:\n``` java\nSpeedDial speedDial = new SpeedDial();\nspeedDial.addMenuItem(\"Copy\", VaadinIcon.COPY, e -> Notification.show(\"Clicked Copy\"));\nspeedDial.addMenuItem(\"Print\", VaadinIcon.PRINT, e -> Notification.show(\"Clicked Print\"));\nspeedDial.setBackdrop(true);\nadd(speedDial);\n```\n \n\u00A0 \n### \uD83C\uDFA8 Theming\n\n**SpeedDial**\n\n|Style|Method|\n|---|---|\n|`setColor(color)`|The background color of the main Action Button|\n|`setIconColor(color)`|The icon color of the main Action Button|\n|`setColorFocus(color)`|The background color of the Floating Action Button when focused|\n|`setColorClose(color)`|The background color of the Floating Action Button when opened|\n|`setColorCloseFocus(color)`|The background color of the Floating Action Button when opened and focused|\n|`setPositionMode(position)`|The type of positioning method used for the Floating Action Button (default: absolute)|\n|`setMarginRight(marginRight)`|Margin to the right of the screen (default: 16px)|\n|`setMarginBottom(marginBottom)`|Margin to the bottom of the screen (default: 16px)|\n\n**SpeedDialAction**\n\n|Style|Method|\n|---|---|\n|The icon color of the Floating Action Button|\n|`setColorActionLabelText(color)`|The text color of label|\n|`setColorActionLabel(color)`|The background color of label|\n|`setColorAction(color)`|The background color of the Floating Action Button|\n|`setColorActionFocus(color)`|The background color of the Floating Action Button when focused|\n\u00A0 \n\n**License**: Apache 2
Web Component
Online Demo
View on GitHub

Speed Dial version 1.0.0

Speed Dial version 1.1.0
Added support for all 11 CSS properties: * `setColor(color)` * `setPositionMode(position)` * `setMarginRight(marginRight)` * `setColorActionLabelText(color)` * `setColorAction(color)` ...

Online