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
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