Rating

• config?: PropsConfig<RatingProps>

an optional alert config

RatingWidget

a RatingWidget

object

a copy of the default config

ariaLabel: string

The aria label

'Rating'

ariaLabelledBy: string

The aria labelled by

''

ariaValueTextFn: (rating, maxRating) => string

Return the value for the 'aria-valuetext' attribute.

• rating: number

Current rating value.

• maxRating: number

maxRating value.

string

(rating: number, maxRating: number) => `${rating} out of ${maxRating}`

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

If true, the rating is disabled.

false

maxRating: number

The maximum rating that can be given.

10

onHover: (rating) => void

An event emitted when the user is hovering over a given rating.

Event payload is equal to the rating being hovered over.

• rating: number

void

() => {}

onLeave: (rating) => void

An event emitted when the user stops hovering over a given rating.

Event payload is equal to the rating of the last item being hovered over.

• rating: number

void

() => {}

onRatingChange: (rating) => void

An event emitted when the rating is changed.

Event payload is equal to the newly selected rating.

• rating: number

void

() => {}

rating: number

The current rating. Could be a decimal value like 3.75.

0

readonly: boolean

If true, the rating can't be changed.

false

resettable: boolean

Define if the rating can be reset.

If set to true, the user can 'unset' the rating value by cliking on the current rating value.

true

tabindex: number

Allows setting a custom rating tabindex. If the component is disabled, tabindex will still be set to -1.

0

click(index): void

Method to be used when a star is clicked.

To be used in the onclick event of a star

• index: number

Star index, starting from 1

void

handleKey(event): void

Method to be used to handle the keyboard.

To be used in the onkeydown of the rating container

• event: KeyboardEvent

void

hover(index): void

Method to be used when the mouse enter in a star.

To be used in the onmouseenter of a star

• index: number

Star index, starting from 1

void

leave(): void

Method to be used when the mouse leave the widget.

To be used in the onmouseleave of the rating container

void

containerDirective: Directive

A directive to be applied to the main container This will handle the keydown, mouseleave, tabindex and aria attributes

starDirective: Directive<object>

A directive to be applied on each star element

index: number

ariaLabel: string

The aria label

'Rating'

ariaLabelledBy: string

The aria labelled by

''

ariaValueTextFn: (rating, maxRating) => string

Return the value for the 'aria-valuetext' attribute.

• rating: number

Current rating value.

• maxRating: number

maxRating value.

string

(rating: number, maxRating: number) => `${rating} out of ${maxRating}`

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

If true, the rating is disabled.

false

maxRating: number

The maximum rating that can be given.

10

onHover: (rating) => void

An event emitted when the user is hovering over a given rating.

Event payload is equal to the rating being hovered over.

• rating: number

void

() => {}

onLeave: (rating) => void

An event emitted when the user stops hovering over a given rating.

Event payload is equal to the rating of the last item being hovered over.

• rating: number

void

() => {}

onRatingChange: (rating) => void

An event emitted when the rating is changed.

Event payload is equal to the newly selected rating.

• rating: number

void

() => {}

rating: number

The current rating. Could be a decimal value like 3.75.

0

readonly: boolean

If true, the rating can't be changed.

false

resettable: boolean

Define if the rating can be reset.

If set to true, the user can 'unset' the rating value by cliking on the current rating value.

true

tabindex: number

Allows setting a custom rating tabindex. If the component is disabled, tabindex will still be set to -1.

0

ariaLabel: string

The aria label

'Rating'

ariaLabelledBy: string

The aria labelled by

''

ariaValueText: string

the aria value of the rating

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

If true, the rating is disabled.

false

interactive: boolean

is the rating interactive i.e. listening to hover, click and keyboard events

maxRating: number

The maximum rating that can be given.

10

rating: number

The current rating. Could be a decimal value like 3.75.

0

readonly: boolean

If true, the rating can't be changed.

false

resettable: boolean

Define if the rating can be reset.

If set to true, the user can 'unset' the rating value by cliking on the current rating value.

true

stars: StarContext[]

the list of stars

tabindex: number

Allows setting a custom rating tabindex. If the component is disabled, tabindex will still be set to -1.

0

visibleRating: number

the visible value of the rating (it changes when hovering over the rating even though the real value did not change)

fill: number

indicates how much the current star is filled, from 0 to 100

index: number

the position of the star in the rating