Rating     

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

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Installation

Edit /quasar.conf.js:

framework: {
components: ['QRating']
}

Basic Usage

<q-rating v-model="ratingModel" :max="3" />

<!-- Disabled State -->
<q-rating
disable
v-model="ratingModel"
:max="3"
/>

Vue Properties

Supports v-model which should be binded to a Number in your scope.

Vue PropertyTypeDescription
maxNumberNumber of icons to display.
iconStringIcon to use as grade. Default value: grade.
colorStringOne of Quasar Color Palette.
sizeStringCSS size String. Examples: ‘12px’, ‘2rem’.
readonlyBooleanDisplay as readonly.
disableBooleanWhen set to true user can not change model value and Rating is faded.

Vue Methods

Vue MethodDescription
set(value)Parses and sets that value.

Vue Events

Vue EventDescription
@input(newVal)Triggered on model value change.
@change(newVal)Triggered on model value change.

Coloring

Use one of the Quasar colors from the Color Palette, like primary, secondary, orange-7, teal-2 as CSS class:

<q-rating
class="orange"
v-model="ratingModel"
:max="5"
/>