svelte-stars-rating
A Highly Customizable, easy-to-use elegant stars rating component
Demo
Usage
Install via NPM npm i svelte-stars-rating
Then require in your project:
var StarRating = ;
or ES6 syntax:
You can then use the following selector anywhere in your project:
- To get up and running quick the package now supports rendering just the selector with default values
Basics
Property | Type | Description | Default |
---|---|---|---|
rating | Number | A number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons | 1 |
isIndicatorActive | Boolean | A property that deteremines weather a rating indicator would show to the right | true |
Customized Styling
Property | Type | Description | Default |
---|---|---|---|
fullStarColor | string | Set the full or partially-full star color | #ffd219 |
emptyStarColor | string | Set the empty or partially-empty star color | #737373 |
styleStarWidth | number | Set the star width | 20 |
Implementation Example
Define your config options object in the component importing StarRating e.g
const app = target: documentbody props: name: "svelte-stars-rating" rating: 47 isIndicatorActive: false style: styleStarWidth: 85 styleEmptyStarColor: "#737373" styleFullStarColor: "#ffd219"
or
let style = styleStarWidth: 85 styleEmptyStarColor: "#737373" styleFullStarColor: "#ffd219"
Feedback would be much appreciated, questions, suggestions, issues are more than welcome.
If you like to support my open-source contributions and feeling generous, feel free to: