DEPRECATED
Use the @anypoint-web-components/awc module instead.
A component that renders stars for rating.
<star-rating value="3"></star-rating>
<star-rating value="4" readonly></star-rating>Element can be styled using CSS variables
<star-rating class="theme-blue" value="3"></star-rating>
<style>
.theme-blue {
--star-rating-unselected-color: #BBDEFB;
--star-rating-selected-color: #1565C0;
--star-rating-active-color: #2196F3;
}
</style>Usage
Installation
npm install --save @advanced-rest-client/star-rating
In an html file
<html>
<head>
<script type="module">
import './node_odules/@advanced-rest-client/star-rating/star-rating.js';
</script>
</head>
<body>
<label id="ratingLabel">My rating</label>
<star-rating value="2" arial-labelledby="ratingLabel"></star-rating>
<script>
{
document.querySelector('star-rating').onchange = (e) => {
console.log(`New rating is ${e.target.value}`);
};
}
</script>
</body>
</html>In a LitElement
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/star-rating/star-rating.js';
class SampleElement extends LitElement {
static get properties() {
return {
rating: { type: Number }
}
}
_ratingChanged(e) {
this.rating = e.target.value;
}
render() {
return html`
<star-rating .value="${this.rating}" @value-changed="${this._ratingChanged}"></star-rating>
`;
}
}
customElements.define('sample-element', SampleElement);In a Polymer 3 element
import { PolymerElement, html } from '@polymer/polymer';
import '@advanced-rest-client/star-rating/star-rating.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<star-rating value="{{rating}}"></star-rating>
`;
}
}
customElements.define('sample-element', SampleElement);Development
git clone https://github.com/advanced-rest-client/star-rating
cd star-rating
npm installRunning the demo locally
npm startRunning the tests
npm test