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

NOTE: in new version use key 'settings' instead of '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 :)