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