Rating
Represents the KendoVue Rating component. Accepts properties of type RatingProps. Use the Rating to let the user rate an item, for example with stars.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:RatingProps
Syntax:
<Rating :max="5" :default-value="3" :precision="'half'" />Properties
ariaDescribedBy?
string
Sets the IDs of the elements that describe the Rating, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.
ariaLabelledBy?
string
Sets the IDs of the elements that label the Rating.
className?
string
Sets additional CSS classes to the Rating.
defaultValue?
number
Sets the initial value of the Rating when you do not set value. See example
dir?
string
Sets the direction of the Rating. Accepts ltr or rtl.
disabled?
boolean
Disables the Rating when you set it to true. See example
half?
boolean
Sets whether the value represents a half icon. See example
icon?
string
Sets a custom icon for the Rating items. The Rating shows a star when you do not set it. See example
id?
string
Sets the id of the wrapping element of the Rating.
item?
any
Sets the template of each Rating item. Accepts a slot name, a render function, or a Vue component.
label?
string
Sets the text of the label that the Rating shows after its items.
max?
number
Sets the maximum value of the Rating. In the default case, this is the value of the last star.
5
min?
number
Sets the minimum value of the Rating. In the default case, this is the value of the first star.
1
name?
string
Sets the name property of the input DOM element.
onBlur?
(event: FocusEvent) => void
Fires when the Rating loses the focus. The event name is blur.
onChange?
(event: RatingChangeEvent) => void
Fires each time the user changes the value. The event receives the target element, the new value, and the native event. The event name is change.
onClick?
(event: RatingItemMouseEvent) => void
Fires when the user clicks a Rating item. The event name is click.
onFocus?
(event: FocusEvent) => void
Fires when the Rating gets the focus. The event name is focus.
onKeyDown?
(event: RatingKeyboardEvent) => void
Fires when the user presses a key while the Rating has the focus. The event receives the current value and the native event. The event name is keydown.
precision?
"item" | "half"
'item'
readonly?
boolean
Sets the Rating to read-only mode when you set it to true. See example
required?
boolean
Sets whether null is a valid value for the component.
selection?
"continues" | "single"
'continues'
step?
number
Sets the step between the min and max values.
1
style?
any
Sets additional CSS styles to the Rating.
svgIcon?
SVGIcon
Sets a custom SVG icon for the Rating items.
svgIconOutline?
SVGIcon
Sets a custom outline SVG icon for the Rating items.
tabIndex?
number
Sets the tabIndex attribute of the Rating.
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validationMessage?
string
Sets the form error message of the component. If you set it to an empty string, the component shows no error.
validityStyles?
boolean
Shows or hides the invalid state styles of the component. When you set it to false, the component shows no invalid state styles.
value?
number
Sets the value of the Rating. Use it to control the value. See example