Rating #
The va-rating
component is a simple yet powerful element when it comes to gathering users feedback. Just in a few lines of code it can provide you with users ratings about your product or application.
Examples #
Default #
The va-rating
component has a simple interface to collect user feedback.
Colors #
With color
prop you can change the color of the component.
Sizes #
Using size
prop specify custom size for an va-rating
component.
Hover #
By using hover
prop you can see visual changes of value before click.
Halves #
You can divide your va-rating
component values on halves.
Numbers #
Want to see numbers instead of icons? We got you covered.
Custom Icons #
Providing this prop to component allows you to add custom icons.
Item slot #
You can pass own html to the component using item
slot. We still handle user events and accessibility, but you can change appearance.
Texts #
A component can be covered by different custom labels for each value.
Clearable #
Selecting current value again will clear the component.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
ariaItemLabel |
|
| |
ariaLabel |
|
| |
clearable |
|
| |
color |
|
| |
disabled |
|
| |
emptyIcon |
|
| |
fontSizesConfig |
|
| |
halfIcon |
|
| |
halves |
|
| |
hover |
|
| |
icon |
|
| |
max |
|
| |
modelValue |
|
| |
numbers |
|
| |
preset |
| - | |
readonly |
|
| |
size |
|
| |
sizesConfig |
|
| |
stateful |
|
| |
tabindex |
|
| |
texts |
|
| |
unselectedColor |
| - |
Events #
Name | Description |
---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Css Variables #
Name | Default Value |
---|---|
--va-rating-display | flex |
--va-rating-number-item-font-size | inherit |
--va-rating-number-item-margin | 0.1em |
--va-rating-number-item-font-weight | 700 |
--va-rating-number-item-cursor | pointer |
--va-rating-item-wrapper-cursor | pointer |
FAQ #
Is rating component keyboard accessible? #
Yes, you can use Tab
(Shift+Tab)
to move between icons and press Enter to submit value. Or you can use arrow keys (Left and Right) to change rating value
Can I use every other prop in combination with numbers prop? #
Yes, all props are compatible between each other.