New York Dog Fair
A fun day at the fair
Types
Rating Flexbox
A basic rating
Star
A rating can use a set of star icons
RatingHeart
A rating can use a set of heart icons
Variations
Size
A rating can vary in size
Examples
Setting existing values
The starting rating can be set either using metadata value data-rating or the setting initialRating.
The maximum rating can be be set using the metadata value data-max-rating or the settings maxRating, or you can just include the icon HTML yourself on initialization to avoid the overhead of the DOM template insertions.
$('.toggle.example .rating')
.rating({
initialRating: 2,
maxRating: 4
})
;
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
Metadata
You can specify the starting rating, and max rating in metadata.
$('.ui.rating')
.rating()
;
Javascript
You can specify the rating values in Javascript
$('.ui.rating')
.rating({
initialRating: 3,
maxRating: 5
})
;
Behaviors
All the following behaviors can be called using the syntax:
$('.ui.rating')
.rating('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 |
| fireOnInit | false | Whether callbacks like onRate should fire immediately after initializing with the current value. |
| 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 |
| silent | False | Silences all console output including error messages, regardless of other debug settings. |
| debug | False | 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'
}
|
|