stars-rating
A stars' images filled to show a rate
[ This description is mirrored from README.md at github.com/manufosela/stars-rating on 2019-05-10 ]
stars-rating
Lit-Elementy web component configurable to vote a rate stars.
Demo
<h2>Basic stars-rating Demo</h2>
<h3>Demo 1</h3>
<stars-rating numstars="8" rating="6"></stars-rating>
<h3>Demo 2 - stars size 0.5em</h3>
<stars-rating numstars="12" rating="8" star-size="0.5em"></stars-rating>
<h3>Demo 3 - Customized</h3>
<style>
#emoji {
--start-unicode: '❤️';
--star-size: 0.5em;
}
</style>
<stars-rating id="emoji" numstars="8" rating="6"></stars-rating>
<h3>Demo 4 - Click in star to vote a rating</h3>
<p>Your rating: <span id="yourRating"></span></p>
<stars-rating id="demo6" numstars="5" manual></stars-rating>
<script>
var el = document.querySelector("#demo6");
el.addEventListener('rating-changed', function(ev) {
document.querySelector("#yourRating").innerText = ev.detail;
})
</script>
<h3>Demo 5 - Click in star to vote a rating with by default value</h3>
<stars-rating numstars="5" rating="3" manual></stars-rating>
<stars-rating num-stars="8" rating="6"></stars-rating>
<stars-rating num-stars="12" rating="8" star-size="0.5em"></stars-rating>
<p>Click in star to vote a rating</p>
<stars-rating num-stars="5" mode="manual"></stars-rating>
<p>Click in star to change the rating</p>
<stars-rating num-stars="5" rating="3" mode="manual"></stars-rating>
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install
to install your element's dependencies, then run polymer serve
to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
$ polymer test
Build
$ npm run build
Your application is already set up to be tested via web-component-tester. Run polymer test
to run your application's test suite locally.
Author
- Mánu Fosela - Javascript Composer - manufosela
License
This project is licensed under the Apache 2.0 License - see the LICENSE file for details
Acknowledgments
- Cesar Villar @beatbits Thank you for his comments and that he is always there to help
- Jorge del Casar @jorgecasar Thank you for emojis and improvements. You are a true ninja! ;)
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#^2.0.0
- Released
- 2018-06-07
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 1.1.2
- Browser
- Browser Independent
stars-rating - Vaadin Add-on Directory
A stars' images filled to show a rateBasic stars-rating Demo
Demo 1
Demo 2 - stars size 0.5em
Demo 3 - Customized
Demo 4 - Click in star to vote a rating
Your rating:
Demo 5 - Click in star to vote a rating with by default value
Click in star to vote a rating
Click in star to change the rating
License
GitHub Homepage
Online Demo
View on GitHub
stars-rating version 1.0.0
### Dependencies
Polymer/polymer#^1.4.0
stars-rating version 1.1.0
### Dependencies
Polymer/polymer#^1.4.0
stars-rating version 1.1.1
### Dependencies
Polymer/polymer#^1.4.0
stars-rating version 1.1.2
### Dependencies
Polymer/polymer#^1.4.0
stars-rating version 2.0.0
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.0.1
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.0.2
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.0
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.1
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.2
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.3
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.4
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.5
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.6
### Dependencies
Polymer/polymer#^2.0.0
stars-rating version 2.1.7
### Dependencies
Polymer/polymer#^2.0.0