Default
Half Stars
Preset Stars
Fluid Stars
<template>
<!-- DEFAULT -->
<h6>Default</h6>
<star-rating :rtl="$vs.rtl" />
<!-- HALF STAR -->
<h6 class="mt-5">Half Stars</h6>
<star-rating :rtl="$vs.rtl" :increment="0.5"></star-rating>
<!-- PRESET STAR -->
<h6 class="mt-5">Preset Stars</h6>
<star-rating :rtl="$vs.rtl" :rating="4"></star-rating>
<!-- FLUID STAR -->
<h6 class="mt-5">Fluid Stars</h6>
<star-rating :rtl="$vs.rtl" :increment="0.01" :fixed-points="2"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
}
}
</script>
Bordered Stars
Style Rating
Custom Star Shape
Glowing Stars
<template>
<!-- BORDERED -->
<h6>Bordered Stars</h6>
<star-rating :rtl="$vs.rtl" :border-width="3"></star-rating>
<!-- STYLE RATING -->
<h6 class="mt-5">Style Rating</h6>
<star-rating :rtl="$vs.rtl" text-class="text-warning font-medium"></star-rating>
<!-- CUSTOM SHAPE -->
<h6 class="mt-4">Custom Star Shape</h6>
<star-rating :rtl="$vs.rtl" :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>
<h6 class="mt-5">Glowing Stars</h6>
<star-rating :rtl="$vs.rtl" :glow="10"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
}
}
</script>
Small Stars
Big Stars
<template>
<!-- SMALL STARS -->
<h6>Small Stars</h6>
<star-rating :rtl="$vs.rtl" :star-size="20"></star-rating>
<!-- LARGE STARS -->
<h6 class="mt-5">Big Stars</h6>
<star-rating :rtl="$vs.rtl" :star-size="80"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
}
}
</script>
Red Stars
Vibrant Stars
<template>
<!-- RED STAR -->
<h6>Red Stars</h6>
<star-rating :rtl="$vs.rtl" active-color="#EA5455"></star-rating>
<!-- VIBRANT STAR -->
<h6 class="mt-4">Vibrant Stars</h6>
<star-rating :rtl="$vs.rtl" inactive-color="#b9b4f9" active-color="#7367f0"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
}
}
</script>
Capture Rating
{{rating}}
Capture Mouse Over Rating
{{currentRating}}
Resetable stars with v-model (Vue 2.2+)
Hide Rating
<template>
<!-- CAPTURE RATING -->
<h6>Capture Rating</h6>
<star-rating :rtl="$vs.rtl" :show-rating="false" @rating-selected="setRating"></star-rating>
<div class="font-semibold">{{rating}}</div>
<!-- CAPTURE ON HOVER -->
<h6 class="mt-5">Capture Mouse Over Rating</h6>
<div @mouseleave="showCurrentRating(0)" style="display:inline-block;">
<star-rating :rtl="$vs.rtl" :show-rating="false" @current-rating="showCurrentRating" @rating-selected="setCurrentSelectedRating" :increment="0.5"></star-rating>
</div>
<div class="font-semibold">{{currentRating}}</div>
<!-- RESET WTIH V-MODEL -->
<h6 class="mt-5">Resetable stars with v-model (Vue 2.2+)</h6>
<star-rating :rtl="$vs.rtl" v-model="boundRating"></star-rating>
<div class="font-semibold"><a @click="boundRating = 0;" class="cursor-pointer">Reset Rating</a></div>
<!-- HIDE RATIG -->
<h6 class="mt-5">Hide Rating</h6>
<star-rating :rtl="$vs.rtl" :show-rating="false"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
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(){
return {
rating: "No Rating Selected",
currentRating: "No Rating",
currentSelectedRating: "No Current Rating",
boundRating: 3,
}
},
components: {
StarRating
}
}
</script>
Non rounded start rating
Read Only Stars
Lots of stars
Inline Stars
Rated
by our customers.
RTL Stars
<template>
<!-- NON ROUNDED -->
<h6>Non rounded start rating</h6>
<star-rating :rtl="$vs.rtl" :rating="4.67" :round-start-rating="false"></star-rating>
<!-- READ ONLY -->
<h6 class="mt-5">Read Only Stars</h6>
<star-rating :rtl="$vs.rtl" :rating="3.8" :read-only="true" :increment="0.01"></star-rating>
<!-- LOTS OF STARS -->
<h6 class="mt-5">Lots of stars</h6>
<star-rating :rtl="$vs.rtl" :max-rating="10" :star-size="20"></star-rating>
<!-- INLINE -->
<h6 class="mt-5">Inline Stars</h6> Rated
<star-rating :rtl="$vs.rtl" :inline="true" :star-size="20" :read-only="true" :show-rating="false" :rating="5"></star-rating> by our customers.
<!-- RTL -->
<h6 class="mt-5">RTL Stars</h6>
<star-rating :rtl="true" :increment="0.5"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
}
}
</script>