l2t-paper-rating
Polymer element to display "star" ratings in a paper style
[ This description is mirrored from README.md at github.com/Link2Twenty/l2t-paper-rating on 2019-05-22 ]
<l2t-paper-rating>
A polymer element to display "star" ratings in a paper style
Install with bower
First you need bower, see their site for details
bower install --save l2t-paper-rating
Examples
<l2t-paper-rating></l2t-paper-rating> <br/>
<l2t-paper-rating rating="2" readonly></l2t-paper-rating> <br/>
<l2t-paper-rating rating="3" total="4"></l2t-paper-rating>
A11y/ARIA
For screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the aria-label or aria-labelledby properties directly.
There are examples of both methods on the demo page.
Styling
The following custom properties are available for styling:
Custom property | Description | Default |
---|---|---|
--rating-icon-color | The color of the icons | --primary-text-color |
--rating-icon-size | The size of the icon (square) | 28px |
--rating-icon-padding | The size of the padding between icons | 2px |
--rating-ink-color | The color of the ripple on icon tap | --primary-text-color |
--rating-unselected-opacity | The opacity of stars 'non-active' | 0.4 |
Properties
Public
Attribute Name | Functionality | Type | Default |
---|---|---|---|
icon | the icon to use (iron-icons) | String | star |
rating | numbers of star selected (reflectToAttribute) | Number | 1 |
readonly | can the rate be modified | Boolean | false |
total | maximum number of stars selectable | Number | 5 |
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#^2.0.0
- paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
- iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
- iron-icons#PolymerElements/iron-icons#^2.0.0
- Released
- 2018-02-05
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
l2t-paper-rating - Vaadin Add-on Directory
Polymer element to display "star" ratings in a paper styleGitHub Homepage
Issue tracker
Documentation
Online Demo
l2t-paper-rating version 1.0.1
### Dependencies
* polymer#Polymer/polymer#^2.0.0
l2t-paper-rating version 1.0.2
### Dependencies
* polymer#Polymer/polymer#^2.0.0
l2t-paper-rating version 1.0.3
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 1.0.4
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 1.1.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 1.1.1
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 1.1.2
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 1.2.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 2.0.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 2.0.1
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 2.0.2
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version V2.0.3
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 2.0.3
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0
l2t-paper-rating version 2.0.4
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
* iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
* iron-icons#PolymerElements/iron-icons#^2.0.0