Colors of the component are using the Bootstrap CSS vars (along with a default color) so that if you are using bootstrap the component will take your color palette.
createRating(
props?):RatingWidget
Create a RatingWidget with given config props
• props?: PropsConfig<RatingProps>
a RatingWidget
getRatingDefaultConfig():
RatingProps
Retrieve a shallow copy of the default Rating config
the default Rating config
Rating(
props):Element
Rating component that displays a series of stars based on the provided state.
• props: Partial<RatingProps>
The properties for the Rating component.
Element
The rendered Rating component.
This component uses the useWidgetWithConfig hook to initialize and configure the rating widget. It applies directives to the container and individual stars for styling and behavior.
Interface representing the API that can be performed on a rating component.
leave():
void
Leave the rating, resetting the visible rating to the rating value and triggering the onLeave callback
void
setHoveredRating(
index):void
Sets the hovered rating value.
• index: number
Star index, starting from 1
void
setRating(
index):void
Sets the rating value.
• index: number
Star index, starting from 1
void
Interface representing directives for a rating component.
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
Represents the properties for the Rating component.
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
star:
SlotContent<StarContext>
The template to override the way each star is displayed.
({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)tabindex:
number
Allows setting a custom rating tabindex.
If the component is disabled, tabindex will still be set to -1.
0
Represents the state of a rating component.
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
star:
SlotContent<StarContext>
The template to override the way each star is displayed.
({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)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)
RatingWidget:
Widget<RatingProps,RatingState,RatingApi,RatingDirectives>
Represents a Rating Widget component.
Represents the context for a star in a rating component.
fill:
number
indicates how much the current star is filled, from 0 to 100
index:
number
the position of the star in the rating