Upgrade toQuasar v2and use Vue.js 3
Rating

Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”.

QRating API

Usage

Basic







Icons




In the example below, when using the icon-selected prop, notice we can still use icon as well. The latter becomes the icon(s) when they are not selected.







Colors
v1.5+

When using the color-selected prop, notice we can still use color as well. The latter becomes the color(s) of the icons when they are not selected.




Floating number
v1.7.4+




No dimming
v1.7.4+




Tooltips
v1.5+

Notice how we can add tooltips to each icon in the example below.




Sizes

Apart from the standard sizes below, you can define your own through the size property.




Readonly and disable




Native form submit
v1.9+

When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QRating, otherwise formData will not contain it (if it should):