Rating
Bootstrap 5 Star Rating component
Responsive star rating built with the latest Bootstrap 5. Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces)
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
*
* UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB method.
Basic example
You can automatically initialize the rating component using
data-mdb-rating-init attribute.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary" title="Bad"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Poor"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="OK"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Good"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Excellent"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Read only
If you want to use a rating to show the score you can use the
readonly option.
<ul class="rating" data-mdb-rating-init data-mdb-readonly="true" data-mdb-value="3">
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Events
Rating emits events after click and hover element. Check the browser console to test it.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
const icon = document.querySelectorAll('#events-example i');
icon.forEach((el) => {
el.addEventListener('scoreHover.mdb.rating', () => {
console.log('scoreHover');
});
el.addEventListener('scoreSelect.mdb.rating', () => {
console.log('scoreSelect');
});
})
const icon = document.querySelectorAll('#events-example i');
icon.forEach((el) => {
el.addEventListener('scoreHover.mdb.rating', () => {
console.log('scoreHover');
});
el.addEventListener('scoreSelect.mdb.rating', () => {
console.log('scoreSelect');
});
})
Custom text
You can add extra text before or after the icon using
data-mdb-after and data-mdb-before attributes.
<ul class="rating" data-mdb-rating-init>
<li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="1" data-mdb-before="1"></i></li>
<li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="2" data-mdb-before="2"></i></li>
<li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="3" data-mdb-before="3"></i></li>
<li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="4" data-mdb-before="4"></i></li>
<li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="5" data-mdb-before="5"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Custom icons
You can use other icons easily. Just place other icon inside the <li> tag.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-heart fa-sm text-primary"></i></li>
<li><i class="far fa-heart fa-sm text-primary"></i></li>
<li><i class="far fa-heart fa-sm text-primary"></i></li>
<li><i class="far fa-heart fa-sm text-primary"></i></li>
<li><i class="far fa-heart fa-sm text-primary"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Number of icons
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.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Icons custom color
If you want to set your own icon color you can use the
data-mdb-color tag.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm" data-mdb-color="#673ab7"></i></li>
<li><i class="far fa-star fa-sm" data-mdb-color="#3f51b5"></i></li>
<li><i class="far fa-star fa-sm" data-mdb-color="#2196f3"></i></li>
<li><i class="far fa-star fa-sm" data-mdb-color="#03a9f4"></i></li>
<li><i class="far fa-star fa-sm" data-mdb-color="#00bcd4"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Dynamic icons
You can make your rating more dynamic by adding
data-mdb-dynamic="true" attribute.
<ul class="rating" data-mdb-rating-init data-mdb-dynamic="true">
<li><i class="far fa-angry fa-lg" data-mdb-color="#673ab7"></i></li>
<li><i class="far fa-frown fa-lg" data-mdb-color="#3f51b5"></i></li>
<li><i class="far fa-meh fa-lg" data-mdb-color="#2196f3"></i></li>
<li><i class="far fa-smile fa-lg" data-mdb-color="#03a9f4"></i></li>
<li><i class="far fa-grin-stars fa-lg" data-mdb-color="#00bcd4"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Styling active elements
You can use active class to set different styles for selected elements.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>
.active {
color: #00c851;
}
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
Popover implementation example
Rating allows you to easily add popover functionality.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
const popoverIcon = document.querySelectorAll('#popover-example i');
popoverIcon.forEach((el) => {
return new Popover(el, {content: 'Example text', placement: 'top'});
})
const popoverIcon = document.querySelectorAll('#popover-example i');
popoverIcon.forEach((el) => {
return new mdb.Popover(el, {content: 'Example text', placement: 'top'});
})
Get selected value
To get the value selected by the user just listen for the scoreSelect.mdb.rating event that
returns a value. Open the browser console to test how it's work.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
<li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>
// Initialization for ES Users
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
const icons = document.querySelectorAll('i')
icons.forEach((el) => {
el.addEventListener('scoreSelect.mdb.rating', (e) => {
console.log('e.value')
})
})
const icons = document.querySelectorAll('i')
icons.forEach((el) => {
el.addEventListener('scoreSelect.mdb.rating', (e) => {
console.log('e.value')
})
})
Rating - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must
first import the component and then initialize it with the initMDB method. If you are going to use the UMD format,
just import the mdb-ui-kit package.
import { Rating, initMDB } from "mdb-ui-kit";
initMDB({ Rating });
import "mdb-ui-kit"
Usage
Via data attributes
Using the Rating component doesn't require any additional JavaScript code - simply add
data-mdb-rating-init attribute to
.rating
and use other data attributes to set all options.
For ES format, you must first import and call the initMDB method.
<ul class="rating" data-mdb-rating-init>
<li><i class="far fa-star fa-sm text-primary" title="Bad"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Poor"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="OK"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Good"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Excellent"></i></li>
</ul>
Via JavaScript
const element = document.querySelector('.rating');
const instance = new Rating(rating, options);
const element = document.querySelector('.rating');
const instance = new mdb.Rating(rating, options);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
<ul class="rating">
<li><i class="far fa-star fa-sm text-primary" title="Bad"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Poor"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="OK"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Good"></i></li>
<li><i class="far fa-star fa-sm text-primary" title="Excellent"></i></li>
</ul>
$(document).ready(() => {
$('.rating').rating(options);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-tooltip="top".
The title and color attributes should be pinned directly to the
icon, not to the wrapper element.
| Name | Type | Default | Description |
|---|---|---|---|
value |
Number | '' |
Sets default rating value |
readonly
|
Boolean | false |
Disable hover, click and keypress events |
after |
String | '' |
Sets a custom text after the icon |
before |
String | '' |
Sets a custom text before the icon |
dynamic
|
Boolean | false |
Dynamically change previous icons to the currently selected/hovered icon |
tooltip
|
String | 'top' |
Sets tooltip position. Available directions are: top, right,
bottom, left
|
title |
String | |
Sets the text displayed in the tooltip |
color |
String | |
Sets icon color |
Methods
| Name | Description | Example |
|---|---|---|
dispose
|
Removes a mdb.Rating instance |
myRating.dispose()
|
getInstance
|
Static method which allows you to get the rating instance associated to a DOM element. |
Rating.getInstance(myRatingEl)
|
getOrCreateInstance
|
Static method which returns the rating instance associated to a DOM element or create a new one in case it wasn't initialized. |
Rating.getOrCreateInstance(myRatingEl)
|
const myRatingEl = document.getElementById('myRating');
const rating = new Rating(myRatingEl);
rating.dispose();
const myRatingEl = document.getElementById('myRating');
const rating = new mdb.Rating(myRatingEl);
rating.dispose();
Events
| Name | Description |
|---|---|
scoreSelect.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.
|
scoreHover.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('scoreSelect.mdb.rating', (e) => {
// do something...
})
CSS variables
As part of MDB’s evolving CSS variables approach, rating now use local CSS variables on
.rating for enhanced real-time customization. Values for the CSS variables are
set via Sass, so Sass customization is still supported, too.
// .rating
--#{$prefix}rating-icon-padding: #{$rating-icon-padding};
SCSS variables
$rating-icon-padding: 0.25rem;