Flow component based on the web component l2t-paper-rating.

Paper Rating

About this component

This Vaadin Flow component uses the paper-rating web component of Link2Twenty as client side to provide a icon based rating element.

For more information about stylings,usage,etc.have a look here.https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating

Usage

To use the component in Java you can either link it from your Polymer template or add it directly per Java.

Usage as Polymer template element

Poylmer

Please note the name of the element in Polymer: l2t-paper-rating.

...
<link rel="import" href="../bower_components/l2t-paper-rating/l2t-paper-rating.html">

<dom-module id="example-template">
	<template>
		<vaadin-vertical-layout>
			<l2t-paper-rating id="paperRating" rating="3" total="5" />
		</vaadin-vertical-layout>
	</template>
        ...
</dom-module>

Java

public class SomePolymerTemplate extends PolymerTemplate<...>{
	@Id("rating")
	private PaperRating rating;
	
	public SomePolymerTemplate(){
		rating.setRating(3);
		rating.addRatingChangedListener(event->System.out.println(event.getRating());
	}
}

Adding it per Java


public class SomeFlowComponent extends Component implements HasComponents {
	public SomeFlowComponent() {
		rating = new PaperRating(3.5);
		rating.setReadOnly(true);
		rating.setTitle("Highest rating was...");
		add(rating);
	}
}

Example usage in a Grid

private void initGrid(){
	// ... init grid
	grid.addColumn(new ComponentRenderer<>(ratingEntity->{
		paperRating rating=new PaperRating(ratingEntity.getRating());
		rating.setReadOnly(true);
		rating.setTitle(buildRatingHint(ratingEntity));
		rating.addClassName("rating-readonly");
	return rating;
	})).setHeader("Avg Rating");
}

Install

Link to this version
BetaReleased 01 June 2018MIT License
Framework Support
Vaadin platform 10
Install with
Release notes - Version 1.0.2.rc1
  • updated to Vaadin 10 RC 1