Examples
Default Values
This example uses default values
Using a Keyboard
First give the element focus by adding a tabindex="0" to your <star-rating>
element. On
focus, you can use the left & right arrow keys to increase & decrease the value
Changing Custom Images
Changing the src attribute will update the rating icon images.
This attribute requires two URL's that are comma separated in a single string value.
Click or tap on the update button below to
change the src attribute from the default value to a value
of "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/US-O7_insignia.svg/2000px-US-O7_insignia.svg.png,
http://www.elm.org/wp-content/uploads/2014/05/gold-star.jpg"
. Click or tap the reset button to reset the example back to the default
src value.
Updating the rating maximum value
Changing the maxvalue attribute will update the total amount
of rating icons. This attribute is the maximum potential rating value a
<star-rating>. Click or tap on the update button below to
change the maxvalue attribute from the default value to a value
of 10. Click or tap the reset button to reset the example back to the default
maxvalue value.
Updating the image size
Changing the size attribute will update the total amount
of rating icons. This attribute is the maximum potential rating value a
<star-rating>. Click or tap on the update button below to
change the maxvalue attribute from the default value to a value
of 10. Click or tap the reset button to reset the example back to the default
maxvalue value.
Events
ratingUpdated
'ratingUpdated' is a DOM Custom Event that fires whenever the value of the <star-rating>
is updated. This event passes a JavaScript object with two key/value pairs that are accessible on
the
'event.detail' object. Test this example out by selecting a
<star-rating>
star to update it's current rating.
Event Detail
maxvalue
this is the current 'maxvalue' attribute value at the time the event fires
value
this is the current value property/attribute value at the time the event fires
The 'ratingUpdated' event has fired with:
Event.detail.maxvalue of 5
Event.detail.value of 0
Attributes
src
This attribute consists of two urls that are comma separated in a single string value. These two
image
paths get added as a background-image url in the css.
required:
no
expected value:
String
default value:
Embedded datauri SVG
maxvalue
maxvalue is the total number of stars you wish to display.
required:
no
expected value:
integer
default value:
5
size
size defines the height & width values in css recognized units for each individual
star.
required:
no
expected value:
css unit string
default value:
36px
Properties
value
value type:
number
Usage
the value property represents the number of stars currently selected.