--- layout : 'default' css : 'rating' title : 'Rating' description : 'A rating lets a user assess and view the desirability of content' type : 'UI Module' --- <%- @partial('header', { tabs: 'module' }) %>
Types Variations

Types

Rating

A basic rating

Star

A rating can use a set of star icons

Star and heart rating types require the inclusion of semantic ui icons
Average rating:

Heart

A rating can use a set of heart icons

Variations

Size

A rating can vary in size

Setting existing values

Starting ratings can be set either using metadata values or the setting initialRating.

If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
New York Dog Fair
A fun day at the fair
Dog Appreciation Day
I night to tell your dog he's great

Read-Only Ratings

You can disable or enable interactive rating

$('.toggle.example .rating') .rating('disable') ;
$('.toggle.example .rating') .rating('enable') ;

Clearing Ratings

When clearable is set to true you can clear the rating by clicking on the current start rating.

$('.clearing.example .rating') .rating('setting', 'clearable', true) ;

Initializing

To change the range of your rating, simply adjust the number of icons in the initialized html

To use any variations besides the basic rating ui icons must be included to provide the additional icons required.
$('.ui.rating') .rating() ;

Behavior

All the following behaviors can be called using the syntax:

$('.ui.rating') .modal('behavior name', argumentOne, argumentTwo) ;
Behavior Description
set rating(rating) Sets rating programmatically
get rating Gets current rating
disable Disables interactive rating mode
enable Enables interactive rating mode
clear rating Clears current rating

Rating Settings
Rating settings modify the rating's behavior

Setting Default Description
initialRating 0 A number representing the default rating to apply
clearable false If enabled clicking on the current star rating will clear the rating
interactive true Whether to enable user's ability to rate

Callbacks
Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onRate(value) Rating Is called after user selects a new rating

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace rating Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { icon : '.icon' }
className
className : { active : 'active', hover : 'hover', loading : 'loading' },

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Rating Name used in debug logs
debug True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error
error : { action : 'You called a rating action that was not defined' }