--- layout : 'default' css : 'rating' element : 'rating' elementType : 'module' title : 'Rating' description : 'A rating allows a user to indicate interest in content' type : 'UI Module' themes : ['Default'] --- <%- @partial('header', { tabs: 'module' }) %>
Types Variations

Types

Rating

A basic rating

Star

A rating can use a set of star icons

Rating
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'd like 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

$('.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 auto By default a rating will be only clearable if there is 1 icon. Setting to true/false will allow or disallow a user to clear their 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' }