thy-star-rating
v0.1.6
Published
This is a simple star-rating web-component built with lit. It has a "value" attribute to set the initial value declarative.
Downloads
7
Maintainers
thooyorkReadme
ThyStarRating
This is a simple star-rating web-component built with lit. It has a "value" attribute to set the initial value declarative.
Features
- small
- lightweight
- framework agnostic (like any other true web component)
- integrates for example with vanilla, vue, react, angular, svelte, solid.js and many more
<thy-star-rating></thy-star-rating>
<thy-star-rating readonly></thy-star-rating> //readonly
<thy-star-rating disabled></thy-star-rating> //disabled
<thy-star-rating value="2"></thy-star-rating> // sets the initial Rating to 2 starsIt also fires a custom event "changed" when the rating is changed, that you can listen to like so:
const els = document.querySelectorAll('thy-star-rating');
els.forEach((el, idx) => {
el.addEventListener('changed', (e) => {
console.log(`Component ${idx + 1}: Rating changed from ${e.detail.oldValue} 🡒 ${e.detail.value}`);
});
});Installation
npm install thy-star-ratingUsage
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My fancy app</title>
<script type="module">import 'thy-star-rating';</script>
</head>
<body>
<thy-star-rating></thy-star-rating>
</body>
</html>Attributes
| name | type | default-value | | --- | --- | --- | | value | number (0-5) | 0 | | readonly | boolean | false | | disabled | boolean | false |
Styling
Overwrite colors with this css vars:
| default | hover | clicked | disabled |
| --- | --- | --- | --- |
|--star-default-color|--star-halo-color|--star-rated-color|--star-disabled-color|