Skip to content

A highly dynamic vue stars rating component, similar to google play stars rating

Notifications You must be signed in to change notification settings

JonathanDn/vue-stars-rating

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-dynamic-star-rating

A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)

MIT License view on npm

For a walkthrough blogpost about how I implemented this component you can head to my medium post

Demo

4.8 star rating

Edit Vue Template

Usage

Install via NPM npm i vue-dynamic-star-rating

Then require in your project:

var StarRating = require('vue-dynamic-star-rating');

or ES6 syntax:

import StarRating from 'vue-dynamic-star-rating'

Then you can register the component globally:

Vue.component('star-rating', StarRating);

Or in your Vue component:

components: {
  StarRating
}

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
<star-rating></star-rating>

Docs

The component <star-rating></star-rating> support various property. You can use either :

  • rating to define the default rating value
  • star-style to define the style that applies to the rating. If not provided, the default values are used.
  • is-indicator-active to determine if an indicator should be enabled.

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
starStyle Object See the following "Customized Styling" section below { "fullStarColor" : "#ed8a19", "emptyStarColor" : "#737373", "starWidth" : 20, "starHeight" : 20 }

Customized Styling

Property Type Description Default
fullStarColor string Set the full or partially-full star color #ed8a19
emptyStarColor string Set the empty or partially-empty star color #737373
starWidth number Set the star width 20
starHeight number Set the star height 20

Implementation Example

Define your config options object in the component importing StarRating e.g

data: function() {
    return {
        rating: 4.7,
        starStyle: {
            fullStarColor: '#ed8a19',
            emptyStarColor: '#737373',
            starWidth: 30,
            starHeight: 30
        }
    }
}

And bind it to the selector like so

<star-rating :rating="rating" :star-style="starStyle"></star-rating>

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.


👨‍💻 Follow me on Twitter.

About

A highly dynamic vue stars rating component, similar to google play stars rating

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages