Material Admin

Ratings - Rate Yo!

RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.

Page Demo Plugin Website

Rate Yo options can be accessed through HTML data attributes. We can initiate the javascript function with least options and customize the plugin using data attribute in the HTML.

if($('.rating')[0]) {
    $('.rating').each(function () {
        var rating = $(this).data('rating');

        $(this).rateYo({
            rating: rating,
            normalFill: 'rgba(255,255,255,0.3)',
            ratedFill: '#ffc107'
        });
    });
}

Basic RateYo examples with start width and rating values.

<div class="rating" data-rateyo-star-width="20px" data-rating="0"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="1"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="2"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="3"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="4"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="5"></div>

Different sizes can be set using data attribute data-rateyo-star-width.

<div class="rating" data-rateyo-star-width="10px" data-rating="0"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="1"></div>
<div class="rating" data-rateyo-star-width="30px" data-rating="2"></div>
<div class="rating" data-rateyo-star-width="40px" data-rating="3"></div>

The color for the rated part of a star. You can set this option using data-rateyo-rated-fill attribute.

<div class="rating" data-rateyo-star-width="20px" data-rating="2" data-rateyo-rated-fill="#dc3545"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="3" data-rateyo-rated-fill="#007bff"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="4" data-rateyo-rated-fill="#20c997"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="5" data-rateyo-rated-fill="#fd7e14"></div>

Requirements:

/scss/inc/vendor-overrides/_rateYo.scss
/vendors/rateyo/jquery.rateyo.min.css
/vendors/rateyo/jquery.rateyo.min.js