Rating

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

Installation

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

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

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

Different icon and color when half selected

No dimming

No dimming

Tooltips

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

Native form submit

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):

Native form

QRating API

Loading API...
Please wait...