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

Usage

Initializing a rating

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() ;

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

Heart

A rating can use a set of heart icons

Examples

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) ;

Variations

Size

A rating can vary in size

Behavior

Set Rating

A rating can be set programatically

$('.ui.rating') .rating('set rating', 3) ;

Get Rating

A rating can be retrieved

$('.ui.rating') .rating('set rating', 3) ;

Enable

Enables interactive rating

$('.ui.rating') .rating('enable') ;

Disable

Disables interactive rating

$('.ui.rating') .rating('disable') ;

Clear Rating

A rating can be cleared

$('.ui.rating') .rating('clear rating') ;

Settings

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

Callback settings 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' }