JavaScript Rating
Pico Library
This library has less than 2 KBytes
The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.
Documentation
Installation
npm install @lemonadejs/rating
Attributes
Attribute | Type | Description |
---|---|---|
name? | String | The name of the component |
number? | Number | The number of stars. Default 5. |
value? | Number | The initial value. Default null. |
Events
Attribute | Description |
---|---|
onchange? | When the value of the component changes. |
Examples
Changing the self.value
will trigger the view updates. If you set the self.value
with the same current value, that will reset the value.
Basic example
starstarstarstar_outlinestar_outline
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id='root'></div>
<script>
const Component = function() {
const self = this;
self.plus = () => {
self.number++;
}
self.minus = () => {
self.number--;
}
self.reset = () => {
self.value = 1;
}
self.change = (newValue) => {
console.log('New value', newValue);
}
self.number = 5;
self.value = 3;
return `<>
<p><Rating :value="self.value" :number="self.number" onchange="self.change" /></p>
<input type="button" value="Value=1" onclick="self.reset" />
<input type="button" value="Add star" onclick="self.plus" />
<input type="button" value="Remove star" onclick="self.minus" />
</>`;
}
// Render component
lemonade.render(Component, document.getElementById('root'));
</script>
</html>