A material design - floating action button with speed dial

Vaadin-14 Polymerl Github Published on Maven Central

Vaadin 14 Java integration of @polymer/paper-fab-speed-dial.

Features
⭐ Floating menu bar
⭐ Build in support of Vaadin Icons
⭐ Backdrop to darken the background on open
⭐ Setters for all 11 CSS properties
⭐ Server side ClickListener
⭐ Server side close and open actions
⭐ Up to date Polymer 3.0
 
Add it as dependency - It's available on the Central Maven Repository:

<dependency>
    <groupId>io.github.tobsef</groupId>
    <artifactId>speed-dial</artifactId>
    <version>1.1.4</version>
</dependency>

Current Version: 1.1.4
Please 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!

Add it to your View:

SpeedDial speedDial = new SpeedDial();
speedDial.addMenuItem("Copy", VaadinIcon.COPY, e -> Notification.show("Clicked Copy"));
speedDial.addMenuItem("Print", VaadinIcon.PRINT, e -> Notification.show("Clicked Print"));
speedDial.setBackdrop(true);
add(speedDial);

 

🎨 Theming

SpeedDial

Style Method
setColor(color) The background color of the main Action Button
setIconColor(color) The icon color of the main Action Button
setColorFocus(color) The background color of the Floating Action Button when focused
setColorClose(color) The background color of the Floating Action Button when opened
setColorCloseFocus(color) The background color of the Floating Action Button when opened and focused
setPositionMode(position) The type of positioning method used for the Floating Action Button (default: absolute)
setMarginRight(marginRight) Margin to the right of the screen (default: 16px)
setMarginBottom(marginBottom) Margin to the bottom of the screen (default: 16px)

SpeedDialAction

Style Method
The icon color of the Floating Action Button
setColorActionLabelText(color) The text color of label
setColorActionLabel(color) The background color of label
setColorAction(color) The background color of the Floating Action Button
setColorActionFocus(color) The background color of the Floating Action Button when focused

 

License: Apache 2

Install

Link to this version
StableReleased 15 January 2020Apache License 2.0
Framework Support
Polymer 2.0+
Vaadin platform 14+
Browser Compatibility
10
11
Install with
Release notes - Version 1.1.0

Added support for all 11 CSS properties:

  • setColor(color)
  • setPositionMode(position)
  • setMarginRight(marginRight)
  • setColorActionLabelText(color)
  • setColorAction(color) ...