Rating

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

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QRating'
    ]
  }
}

Usage

Basic

Basic



Custom number of choices



Icons

Image 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.

Different icon when selected



Different icon for each rating



Colors

v1.5.0+

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.

Different color for each rating



Floating number

v1.7.4+
Different icon and color when half selected



No dimming

v1.7.4+
No dimming



Tooltips

v1.5.0+

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

With QTooltip



Sizes

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

Standard sizes



Readonly and disable

Readonly and disable



QRating API