brandv1.0
Utilities
Data Display
Data Entry
Feedback

Ratings

A lightweight jQuery plugin for rendering a SVG based star rating system on your webpage that supports for arbitrary star fractions, variable star sizes and colors.

Default rating

Use class .ratingto display ratings.

							
                                
<template>
    <div>
        <hk-rating :rating="2.5" :fraction="0.5" active-color="#298DFF" />
        <hk-rating :rating="2" :fraction="0.5" />
    </div>
</template>
Props Value Default Description
fraction Number 1 The rating increment, for example pass 0.5 for half stars or 0.01 for fluid stars. Expects a number between 0.01 - 1.
rating Number 0 The current rating value. This controls the number of stars filled in the component.
max-rating Number 5 The maximum rating, this lets HkRating know how many stars to display.
star-points Array [] The points defining a custom star shape. If no points are passed the default star shape is used.
read-only Array [] The points defining a custom star shape. If no points are passed the default star shape is used.
Progressives

Use :active-color="[]" prop for progressive range of colors in <hk-rating>.

							
                                
<template>
    <hk-rating
      :rating="3"
      :active-color="['#FF0000', '#E75410', '#FFC400', '#0FFF9F', '#00D67F']"
    />
</template>
Read only

You can prevent the ratings from user intraction by readOnly prop. 

							
                                
<template>
    <div>
        <hk-rating :rating="3" active-color="#298DFF" readOnly />
        <hk-rating :rating="2" readOnly />
    </div>
</template>
Show Rating Count

You can show ratings count using showRating boolean prop.

							
                                
<template>
    <div>
        <hk-rating :rating="3" active-color="#298DFF" showRating />
        <hk-rating :rating="2" showRating />
    </div>
</template>
Sizes

You can adjust your rating star sizes by adding size="" prop in px.

							
                                
<template>
    <div>
        <hk-rating :rating="2" active-color="#298DFF" />
        <hk-rating :rating="2" active-color="#298DFF" size="30" />
        <hk-rating :rating="2" active-color="#298DFF" size="35" />
    </div>
</template>