Ratingcomponent

Rating is a component that generates a customizable star rating. This component required metro-rating.js.

Component structure

<div class="rating">
    <ul>
        <li class="rated"></li>
        <li class="rated"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span class="score-hint"></span>
</div>

Component definition

<div class="rating"></div>

You can activate widget manually or auto with data-* api.

Activate with API on DATA-ROLE attribute.

<div class="rating"
    data-role="rating"
    data-static="false"
    data-score="3"
    data-stars="5"
    data-show-score="true"
    data-score-hint="Value: ">
</div>

Activate with javascript.

$(function(){
    $("#rating_1").rating({
        static: false,
        score: 2,
        stars: 5,
        showHint: true,
        hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'],
        showScore: true,
        scoreHint: "Current score: ",
    });
});

Event handlers

$(function(){
    $("#rating_2").rating({
        click: function(value, rating){
            rating.rate(value);
        }
    });
});

Change Rating color

To change color of rating you can use built-in color classes fg-* (see colors on Global styles page). Also you can change color style for rating element.

<div class="rating fg-green"></div>
<div class="rating" style="color: #2784A7"></div>

Change Rating size

To change size of rating you can use built-in classes large or small.

<div class="rating"></div>
<div class="rating large"></div>
<div class="rating small"></div>