Rating

Pico Library This library has about 1.5 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 Description
name?: StringThe name of the component
number?: NumberThe number of stars. Default 5.
value?: NumberThe initial value. Default null.

Events

Attribute Description
onchange?: FunctionWhen the value of the component changes
self.onchange(value: Number) => void


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



Source code

Browser
NPM
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/rating/index.js"></script>
<div id='root'></div>
<script>
var Component = function() {
    var self = {};
    self.change = function(newValue) {
        console.log('New value', newValue);
    }
    self.number = 5;
    self.value = 3;

    var template = `<>
            <Rating value="{{self.value}}" number="{{self.number}}" onchange="{{self.change}}" />
            <input type="button" value="Set value" onclick="self.value = 3" />
            <input type="button" value="Add star" onclick="self.number++" />
            <input type="button" value="Remove star" onclick="self.number--" />
        </>`;

    return lemonade.element(template, self, { Rating });
}
</script>
</html>

import lemonade from "lemonadejs";
import Rating from "@lemonadejs/rating";

export default function Component() {
    let self = {
        number: 5,
        value: 3,
    }

    self.change = function(newValue) {
        console.log('New value', newValue);
    }

    let template = `<>
            <Rating value="{{self.value}}" number="{{self.number}}" onchange="{{self.change}}" />
            <input type="button" value="Set value" onclick="self.value = 3" />
            <input type="button" value="Add star" onclick="self.number++" />
            <input type="button" value="Remove star" onclick="self.number--" />
        </>`;

    return lemonade.element(template, self, { Rating });
}

Related content