Rating component can be used to allow the users to share their opinion about the product, documentation page, photo and more.
Note: Read the API tab to find all available options and advanced customization
You can automatically initialize the rating component using
data-mdb-toggle="rating"
If you want to use a rating to show the score you can use the
readonly option
Rating emits events after click and hover element. Check the browser console to test it.
const icon = document.querySelectorAll('#events-example i')
icon.forEach((el) => {
el.addEventListener('onHover.mdb.rating', (e) => {
console.log('onHover')
})
el.addEventListener('onSelect.mdb.rating', (e) => {
console.log('onSelect')
})
})
You can add extra text before or after the icon using
data-mdb-after and data-mdb-before
You can use other icons easily. Just change the fa class to
whatever you want.
If you want to display more or less icons in your rating, all you have to do is
add as many icons as you like inside the <ul> tag.
If you want to set your own icon color you can use the
data-mdb-color tag
You can make you rating more dynamically by adding
data-mdb-dynamic="true"
You can use active class to set different styles for selected
elements
.active { color: #00c851; }
Rating allows you to easily add popover functionality
const popoverIcon = document.querySelectorAll('#popover-example i');
popoverIcon.forEach((el) => {
return new mdb.Popover(el, {content: 'jolo', placement: 'top'});
})
const rating = document.getElementByClassName('rating');
let instance = new mdb.Rating(rating, options);
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('.rating').rating(options);
| Name | Type | Default | Description |
|---|---|---|---|
value |
Number | '' |
Set default rating value |
readonly
|
Boolean | false |
Disable hover, click and keypress events |
after |
String | '' |
Set a custom text after the icon |
before |
String | '' |
et a custom text before the icon |
dynamic
|
Boolean | false |
Dynamically change previous icons to the currently selected/hovered icon |
tooltip
|
String | 'top' |
set tooltip position |
title |
String | '' |
Set the text displayed in the tooltip (for use only on the icons element) |
color |
String | '' |
Set icon color (for use only on the icons element) |
| Name | Description | Example |
|---|---|---|
dispose
|
Removes a mdb.Rating instance |
instance.dispose()
|
const myRatingEl = document.getElementById('myRating');
const rating = new mdb.Rating(myRatingEl);
rating.dispose();
| Name | Description |
|---|---|
onSelect.mdb.rating
|
This event fires immediately when you clicked on icon. The clicked
element is available as the target property of the event,
and selected value as the value property.
|
onHover.mdb.rating
|
This event fires immediately when you hovered on icon. The hovered
element is available as the target property of the event,
and hovered value as the value property.
|
const myRatingEl = document.getElementById('myRating')
myRatingEl.addEventListener('onSelect.mdb.rating', (e) => {
// do something...
})
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Rating } from 'mdb-ui-kit';