Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Class IgrRating

Rating provides insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own

Csspart

base - The main wrapper which holds all of the rating elements.

Csspart

label - The label part.

Csspart

value-label - The value label part.

Csspart

symbols - A wrapper for all rating symbols.

Csspart

symbol - The part of the encapsulated default symbol.

Csspart

full - The part of the encapsulated full symbols.

Csspart

empty - The part of the encapsulated empty symbols.

Cssproperty

--symbol-size - The size of the symbols.

Cssproperty

--symbol-full-color - The color of the filled symbol.

Cssproperty

--symbol-empty-color - The color of the empty symbol.

Cssproperty

--symbol-full-filter - The filter(s) used for the filled symbol.

Cssproperty

--symbol-empty-filter - The filter(s) used for the empty symbol.

Callable

  • IgrRating(): ReactNode

    Returns ReactNode

Events

Methods

Properties

Events

onChange

onChange: (args: CustomEvent<number>) => void

Emitted when the value of the control changes.

Type declaration

onHover

onHover: (args: CustomEvent<number>) => void

Emitted when hover is enabled and the user mouses over a symbol of the rating.

Type declaration

Methods

stepDown

  • stepDown(n?: number): void

    Decrements the value of the control by n steps multiplied by the step factor.

    Parameters

    • n: number

    Returns void

stepUp

  • stepUp(n?: number): void

    Increments the value of the control by n steps multiplied by the step factor.

    Parameters

    • n: number

    Returns void

Properties

allowReset

allowReset: boolean

Whether to reset the rating when the user selects the same value.

hoverPreview

hoverPreview: boolean

Sets hover preview behavior for the component

label

label: string

The label of the control.

max

max: number

The maximum value for the rating.

If there are projected symbols, the maximum value will be resolved based on the number of symbols.

readOnly

readOnly: boolean

Makes the control a readonly field.

single

single: boolean

Toggles single selection visual mode.

step

step: number

The minimum value change allowed.

Valid values are in the interval between 0 and 1 inclusive.

value

value: number

The current value of the component

valueFormat

valueFormat: string

A format string which sets aria-valuetext. Instances of '{0}' will be replaced with the current value of the control and instances of '{1}' with the maximum value for the control.

Important for screen-readers and useful for localization.