Description
Simple star rating component made on Vue.js with a bunch of options and ability to set rating with half star.
Screen Shots
Features
- Stars are SVG elements
- Customizable number of stars
- Stars can be substituted by other elements
- Each star is divided on two halves (there is ability to set a 3.5 rating for example)
- Customizable color, size, space between stars, color on hover, color on select, color of stroke and stroke width.
- Read only option
Demo
Live demo - http://demo-stars-rating.web-ol-mi.pp.ua/
Installation
$npm install stars-rating-component-vue --save
Usage
After installation, all you need is import component, using the next syntax:
import StarsRating from "stars-rating-component-vue"
and bind needed property with the component using "v-model".
Options and configurations
If you want to change default options, you need to pass object with own desired options/settings to the component using "v-bind" (example of options object is further)
a) example of usage without options (default ones)
a) example of usage with options
Available configurations
| Property | Data type | Details |
|---|---|---|
| starsQuantity | number | Property sets number of stars for rating. |
| stroke | string | Property sets color of stars stroke. Accepts any valid CSS-color |
| strokeWidth | number | Property sets width of stars stroke. Accepts number |
| fill | string | Property sets color of stars. Accepts any valid CSS-color |
| highlighted | string | Property sets color of selected stars. Accepts any valid CSS-color |
| hover | string | Property sets color of hovered stars. Accepts any valid CSS-color |
| size | number | Property sets size of stars. Accepts number, which will be used for setting width of stars in px |
| marginRight | number | Property sets space between stars. Accepts number, which will be used for setting 'margin-right' option in px |
| readOnly | boolean | Property enables or disables ability to set rating |
| rating | number | If readOnly is true, this property will be used for showing correct rating |
| d | string | Using this property you can change default stars for any other elements! This property is 'd' attribute of SVG 'path' element. You can read more about it on MDN. Important! For correct replacing of the default stars, you ned to also set 'viewBox' property... |
| viewBox | string | Another property which allows to change the default stars for any other elements... |
Default configuration
| Property | Value |
|---|---|
| starsQuantity | 5 |
| stroke | 'none' |
| strokeWidth | 0 |
| fill | '#DDD' |
| highlighted | '#FFDF12' |
| hover | '#FFED84' |
| size | 25 |
| marginRight | 5 |
| readOnly | false |
| rating | 0 |
| d | M50 0 l-15 35 -35 5 25 24 -6 35 31 -18 31 18 -6 -35 25 -24 -35 -5 -15 -35 z |
| viewBox | 0 0 100 100 |
Example of Options object:
settings: {
starsQuantity: 5,
stroke: 'none',
strokeWidth: 0,
fill: '#DDD',
highlighted: '#FFDF12',
hover: '#FFED84',
size: 25,
readOnly: false,
rating: 0,
marginRight: 5,
d: "M50 0 l-15 35 -35 5 25 24 -6 35 31 -18 31 18 -6 -35 25 -24 -35 -5 -15 -35 z",
viewBox: "0 0 100 100"
}
New
1. New property 'settings_json'
2. New property 'dynamic_id'. If to display in table (or list) use this property for better performance
License
License: MIT. You are free to use it without any restrictions. But I would very appreciate if you send me an email (oleksandrmischuk@gmail.com) with the name of your country and city/town/village :)