Vue 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


If you want to support our friends from Tailwind Elements you can also check out the Tailwind rating documentation.

Vue Rating - API


Import

      

          import { MDBRating, MDBRatingItem } from "mdb-vue-ui-kit";
        

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