New York Dog Fair
A fun day at the fair
Types
Rating Flexbox
A basic rating
Icon
You can use any available icon as rating indicator
Color
You can specify any color of the FUI color palette
Partial Ratings
You can use decimal values for showing partially filled ratings
States
Disabled
A rating can be started in non-interactive mode by adding a disabled class
Variations
Size
A rating can vary in size
Examples
Setting existing values
The icon can be set either using metadata value data-icon or the setting icon.
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 icon, starting rating and max rating in metadata.
$('.ui.rating')
.rating()
;
Javascript
You can specify the icon and rating values in Javascript
$('.ui.rating')
.rating({
icon: 'circle',
initialRating: 3,
maxRating: 5
})
;
Without Javascript
If you don't need user interaction, you can use the rating module as a pure read-only CSS element
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 |
| destroy | Destroys instance and removes all events |
Rating Settings
Rating settings modify the rating's behavior
| Setting | Default | Description |
|---|---|---|
| icon | star | The icon classname |
| initialRating | 0 | A number representing the default rating to apply |
| maxRating | 4 | The maximum rating value |
| 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 | false | Provides ancillary debug output to console |
| error |
error : {
method : 'The method you called is not defined'
}
|
|