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.webcomponents.org - Discuss & share web components
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");
}