awesome-vue-star-rating

Awesome Vue Star Rating

Simple and Easy Customisable Awesome Vue Star Rating using Pure Vue application without any external package.

Installing

npm install --save awesome-vue-star-rating

Features

1. Font icon stars — scale without loss of quality
2. Customisable ratings and rating descriptions
3. Customisable results of selected value and description
4. Customisable number of stars
5. Create read-only stars
6. Customisable Colors

Options

Property	Type	Required	Description
star	Number	Required.	Default value of Star. Default value is 2
maxstars	Number	Required.	Default value is 5.
hasresults	Boolean	Optional.	Displaying the result values. Default value is true.
hasdescription	Boolean	Optional.	Default value is true.
ratingdescription	Array	Required.	Displaying the rating values. Ex. [{ text: 'Poor', class: 'star-poor' }, { text: 'Below Average', class: 'star-belowAverage' }, { text: 'Average', class: 'star-average' }, { text: 'Good', class: 'star-good' }, { text: 'Excellent', class: 'star-excellent' }]
starsize	String	Optional.	Displaying the size of the stars. Default value is lg. We have list of [xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x] other optional values too.
disabled	Boolean	Optional.	Enable or disable the star selection. Default value is false.

Usage

Step 1: import AwesomeVueStarRating in our component

import AwesomeVueStarRating from 'awesome-vue-star-rating'

export default {
  name: 'app',
  components: {
    AwesomeVueStarRating
  }
}
</script>

Step 2: Load default values to the component

data() {
    return {
      star: 5, // default star
      ratingdescription: [
        {
          text: 'Poor',
          class: 'star-poor'
        },
        {
          text: 'Below Average',
          class: 'star-belowAverage'
        },
        {
          text: 'Average',
          class: 'star-average'
        },
        {
          text: 'Good',
          class: 'star-good'
        },
        {
          text: 'Excellent',
          class: 'star-excellent'
        }
      ],
      hasresults: true,
      hasdescription: true,
      starsize: 'lg', //[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x],
      maxstars: 5,
      disabled: false
    }
}

Step 3: Place the Rate component inside the template

<template>
  <div id="app">
    <AwesomeVueStarRating :star="this.star" :disabled="this.disabled" :maxstars="this.maxstars" :starsize="this.starsize" :hasresults="this.hasresults" :hasdescription="this.hasdescription" :ratingdescription="this.ratingdescription" />
  </div>
</template>

Step 4: Customize the star color styles like below

<style lang="scss">
 .star {
  color: red;
 }
 .star.active {
  color: red;
 }
 .list, .list.disabled {
  &:hover {
    .star {
      color: red !important;
    }
    .star.active {
      color: red;
    }
  }
}
</style>

Compiles and hot-reloads for development

npm run serve

Screen Shot

Demo

🎉 Demo Link 🎉

Compiles and minifies for production

npm run build

Run your tests

npm run test