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']
}

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

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

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

Vue Property	Type	Description
`max`	Number	Number of icons to display.
`icon`	String	Icon to use as grade. Default value: `grade`.
`color`	String	One of Quasar Color Palette.
`size`	String	CSS size String. Examples: ‘12px’, ‘2rem’.
`readonly`	Boolean	Display as readonly.
`disable`	Boolean	When set to `true` user can not change model value and Rating is faded.

Vue Method	Description
`set(value)`	Parses and sets that value.

Vue Event	Description
`@input(newVal)`	Triggered on model value change.
`@change(newVal)`	Triggered on model value change.

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"
/>