Blog Detail

07

Mar
A Highly Dynamic Vue Stars Rating Component for Vue Js cover image

arrow_back A Highly Dynamic Vue Stars Rating Component for Vue Js

Vue-dynamic-star-rating is a highly customizable and easy-to-use elegant stars rating component. It is very similar to Google Play. You can view its demo here.

Installation

You can install this component via NPM, Just run this command:

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'

Usage

After the installation, 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 quickly the package now supports rendering just the selector with default values.

<star-rating></star-rating>

The component 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.

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>

For more details you can visit its complete documentation and source code on Github

Published at : 07-03-2022

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project