Vue Rating Component API
Rating API
Explore the API reference for the Vue Rating component and discover how to effectively utilize its props for customization.
CRating
import { CRating } from '@coreui/vue-pro'
Props
| Property | Default | Type |
|---|
| allowClear | - | boolean |
Enables the clearing upon clicking the selected item again. |
| ariaLabel5.20.0+ | (value: number, itemCount: number) => `${value} of ${itemCount}` | (value: number, itemCount: number) => string |
A function that returns the accessible label (aria-label) for each rating item's radio input. Receives the item's value and the total item count. |
| disabled | - | boolean |
Toggle the disabled state for the component. |
| highlightOnlySelected | - | boolean |
If enabled, only the currently selected icon will be visibly highlighted. |
| itemCount | 5 | number |
Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc. |
| modelValue | - | number |
The default name for a value passed using v-model. |
| name | - | string |
The name attribute of the radio input elements. |
| precision | 1 | number |
Minimum increment value change allowed. |
| readOnly | - | boolean |
Toggle the readonly state for the component. |
| size | - | string |
Size the component small, large, or custom if you define custom icons with custom height. |
| tooltips | - | boolean, string[] |
Enable tooltips with default values or set specific labels for each icon. |
| value | - | number |
The value attribute of component. |
Events
| Event name |
|---|
| change |
Execute a function when a user changes the selected element. |
| hover |
Execute a function when a user hover the element. |
| update:modelValue |
Emit the new value whenever there’s a change event. |