Skip to content

Latest commit

 

History

History
80 lines (63 loc) · 4.1 KB

README.md

File metadata and controls

80 lines (63 loc) · 4.1 KB
Raw

Paper Speed Dial

Vaadin-14 Polymerl Published on Maven Central Published on Vaadin Directory Stars on Vaadin Directory

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

screenshot

🌈 Features

⭐ Floating menu bar
⭐ Build in support of Vaadin Icons
⭐ Backdrop to darken the background on open
⭐ Setters fot all 11 CSS properties
⭐ Server side ClickListener
⭐ Server side close and open actions
⭐ Uses Vaadin-Core, so no pro subscription is needed

🖊 Usage

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>

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

🔨 Development instructions

JavaScript modules can either be published as an NPM package or be kept as local files in your project. The local JavaScript modules should be put in src/main/resources/META-INF/frontend so that they are automatically found and used in the using application.

If the modules are published then the package should be noted in the component using the @NpmPackage annotation in addition to using @JsModule annotation.

Starting the test/demo server:

  1. Run mvn jetty:run.
  2. Open http://localhost:8080 in the browser.

🎨 Theming

SpeedDial

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

SpeedDialAction

Style Method Description
--iron-icon-fill-color setIconColor(color) The icon color of the Floating Action Button
--paper-fab-speed-dial-action-label-color setColorActionLabelText(color) The text color of label
--paper-fab-speed-dial-action-label-background setColorActionLabel(color) The background color of label
--paper-fab-speed-dial-action-background setColorAction(color) The background color of the Floating Action Button
--paper-fab-speed-dial-action-keyboard-focus-background setColorActionFocus(color) The background color of the Floating Action Button when focused