Rating
Vue Bootstrap 5 Star Rating component
Responsive star rating built with the latest Bootstrap 5 and Vue 3. 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
Basic example
You can create the rating component using
MDBRating
and MDBRatingItem
Read only
If you want to use a rating to show the score you can use the
readonly
property
Events
Rating emits events after click and hover element. Check the browser console to test it.
Custom text
You can add extra text before or after the icon using
dinsertBefore
and insertAfter
Custom icons
You can use other icons easily with icon
property
Number of icons
If you want to display more or less icons in your rating, all you have
to do is add as many MDBRatingItems
as you like
Icons custom color
If you want to set your own icon color you can use the
color
property
Dynamic icons
You can make you rating more dynamically by adding
dynamic
property
Styling active elements
You can use active
class to set different styles for
selected elements
Popover implementation example
Rating allows you to easily add popover functionality
Get selected value
To get the value selected just use v-model
value
Rating - API
Import
Properties
Rating
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'ul' |
Defines tag of the MDBRating element |
v-model
|
String |
|
Indicates rating value |
readonly
|
Boolean | false |
Disable hover, click and keypress events |
events
|
Boolean | false |
Enable emitting click and hover events on rating elements |
dynamic
|
Boolean | false |
Dynamically change previous icons to the currently selected/hovered icon |
classes
|
String | '' |
Adds custom classes to MDBRating element |
Rating Item
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'li' |
Defines tag of the MDBRatingItem element |
classes
|
String |
|
Adds custom classes to MDBRatingItem element
|
iconClass
|
String |
|
Adds custom classes to icon element |
icon
|
String | 'star' |
Defines rating icon |
flag
|
String | '' |
Enables using flags as icon |
size
|
String | 'sm' |
Defines icon size |
color
|
String | 'sm' |
Defines icon color |
title
|
String | '' |
Set the text displayed in the tooltip |
index
|
Number |
|
Set index on rating element (obligatory property) |
popover
|
Boolean | String | false |
Enables showing popover on click. When
true enables using #default slot
as popover content. When String , passed text is
used as popover content
|
insertBefore
|
String | '' |
Set a custom text before the icon |
insertAfter
|
String | '' |
Set a custom text after the icon |
Events
Events below have to be used together with events
prop.
Name | Description |
---|---|
itemClick
|
This event fires immediately when you clicked on icon. The clicked element is
available as the target property of the event.
|
itemHover
|
This event fires immediately when you hovered on icon. The hovered element is
available as the target property of the event.
|
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.