vue-star-rating examples

Example for the vue-star-rating component

by Nabaraj Saha

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/star-rating.min.js"></script>
<div id="app">

  <h2>Default</h2>
  <star-rating></star-rating>

  <h2>Half Stars</h2>
  <star-rating :increment="0.5"></star-rating>

  <h2>Bordered Stars</h2>
  <star-rating :border-width="3"></star-rating>

  <h2>Red Stars</h2>
  <star-rating active-color="#9c0000"></star-rating>

  <h2>Vibrant Stars</h2>
  <star-rating inactive-color="#e1bad9" active-color="#cc1166"></star-rating>

  <h2>Small Stars</h2>
  <star-rating :star-size="20" :increment="0.5"></star-rating>

  <h2>Big Stars</h2>
  <star-rating :star-size="90"></star-rating>

  <h2>Fluid Stars</h2>
  <star-rating :increment="0.01" :fixed-points="2"></star-rating>

  <h2>Preset Stars</h2>
  <star-rating :rating="4"></star-rating>


  <h2>Custom Star Shape</h2>
  <star-rating :border-width="4" border-color="#d8d8d8" :rounded-corners="true" :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"></star-rating>


  <h2>Non rounded start rating</h2>
  <star-rating :rating="4.67" :round-start-rating="false"></star-rating>

  <h2>Read Only Stars</h2>
  <star-rating :rating="3.8" :read-only="true" :increment="0.01"></star-rating>

  <h2>Lots of stars</h2>
  <star-rating :max-rating="10" :star-size="20"></star-rating>

  <h2>RTL Stars</h2>
  <star-rating :rtl="true" :increment="0.5"></star-rating>


  <h2>Style Rating</h2>
  <star-rating text-class="custom-text"></star-rating>

  <h2>Hide Rating</h2>
  <star-rating :show-rating="false"></star-rating>

  <h2>Inline Stars</h2> Rated
  <star-rating :inline="true" :star-size="20" :read-only="true" :show-rating="false" :rating="5"></star-rating> by our customers.

  <h2>Resetable stars with v-model (Vue 2.2+)</h2>
  <star-rating v-model="boundRating"></star-rating>
  <div style="padding-top:10px;cursor:pointer;margin-bottom:20px;color: blue;"><a @click="boundRating = 0;">Reset...

CSS

body {
  font-family: 'Raleway', sans-serif;
}

.custom-text {
  font-weight: bold;
  font-size: 1.9em;
  border: 1px solid #cfcfcf;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  color: #999;
  background: #fff;
}

JavaScript

Vue.component('star-rating', VueStarRating.default)

new Vue({
  el: '#app',
  methods: {
    setRating: function(rating) {
      this.rating = "You have Selected: " + rating + " stars";
    },
    showCurrentRating: function(rating) {
      this.currentRating = (rating === 0) ? this.currentSelectedRating : "Click to select " + rating + " stars"
    },
    setCurrentSelectedRating: function(rating) {
      this.currentSelectedRating = "You have Selected: " + rating + " stars";
    }
  },
  data: {
    rating: "No Rating Selected",
    currentRating: "No Rating",
    currentSelectedRating: "No Current Rating",
    boundRating: 3,
  }
});