@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/docs/api/RatingProps.md

@@ -0,0 +1,1308 @@
+---
+title: RatingProps
+description: "Learn how to build custom functionality when working with the React Inputs by Kendo UI with the help of the RatingProps."
+api_reference: true
+type: inner_api
+slug: api_inputs_ratingprops
+---
+
+# RatingProps
+Represents the properties of [Rating](% slug api_inputs_rating %) component.
+
+
+<table class="api-table api-table-properties">
+<thead>
+<tr>
+<th class="th-name">Name</th>
+<th class="th-type">Type</th>
+<th class="th-default">Default</th>
+<th class="th-desc">Description</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td class="table-cell-name">
+
+
+#### ariaDescribedBy?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+For example these elements could contain error or hint message.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### ariaLabelledBy?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Identifies the element(s) which will label the component.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### children?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+React.ReactNode
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines the children nodes.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### className?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets additional classes to the Rating.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### defaultValue?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the default value of the Rating, used in uncontrolled mode. [See example]({% slug controlled_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### dir?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines the Rating direction `ltr` - by default, or `rtl`.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### disabled?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the `disabled` mode of the Rating, if it is set to `true`. [See example]({% slug readonly_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### half?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines if value represents half icon -> true, or not -> false. [See example]({% slug precision_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### icon?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### id?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the `id` property of the top div element of the Rating.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### item?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+React.ComponentType&lt;[RatingItemProps]({% slug api_inputs_ratingitemprops %})&gt;
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Represents the rendered Rating item.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### label?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines if the Rating has a label and is it a custom one.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### max?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the max possible icon value or star value in the main use-case.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### min?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the min possible icon value or star value in the main use-case.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### name?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies the `name` property of the `input` DOM element.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### precision?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+"item" | "half"
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines the precision of the Rating. By default set to `item`. [See example]({% slug selection_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### readonly?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the `readonly` mode of the Rating, if it is set to `true`. [See example]({% slug label_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### required?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies if `null` is a valid value for the component.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### selection?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+"single" | "continues"
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %})
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### step?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the step value between the min and max value.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### style?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+React.CSSProperties
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets additional CSS styles to the Rating.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### tabIndex?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the `tabIndex` attribute.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### valid?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Overrides the validity state of the component.
+If `valid` is set, the `required` property will be ignored.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### validationMessage?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Controls the form error message of the component. If set to an empty string, no error will be thrown.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### validityStyles?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+If set to `false`, no visual representation of the invalid state of the component will be applied.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### value?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the current value of the Rating, used in controlled mode. [See example]({% slug item_customization_ratingitem %})
+
+
+</td>
+</tr>
+</tbody>
+</table>
+
+
+
+## Methods
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onBlur
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+Triggered after `onBlur` event. Gets outside access to the target element and the event type.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[RatingItemFocusEvent]({% slug api_inputs_ratingitemfocusevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onChange
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+Triggered after value change. Gets outside access to the target element, the new value and the event type.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[RatingChangeEvent]({% slug api_inputs_ratingchangeevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onClick
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[RatingItemMouseEvent]({% slug api_inputs_ratingitemmouseevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onFocus
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+Triggered after `onFocus` event. Gets outside access to the target element and the event type.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[RatingItemFocusEvent]({% slug api_inputs_ratingitemfocusevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onKeyDown
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[RatingKeyboardEvent]({% slug api_inputs_ratingkeyboardevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+
+