Star rating control¶
This webcomponent is responsible for rendering set of stars which user can use to give his rate to a product. Clicking on any one of them dispatches a custom event which informs that the rating has been changed and other components may listen to this event and perform some actions.
Attributes¶
| Attribute name | Type | Description |
|---|---|---|
| disabled (optional) | boolean | If set to true the stars will be disabled |
DOM events¶
This webcomponent listens to the following DOM events:
Example¶
<star-rating-control>
<div class="stars-rating-control">
<div class="stars-rating-control__stars">
<div class="star-score">
<svg tabindex="0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Set score 1" class="icon icon_xl icon_no-stroke star-icon star-icon_hoverable">
<path d="..."></path>
</svg>
<svg tabindex="0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Set score 2" class="icon icon_xl icon_no-stroke star-icon star-icon_hoverable">
<path d="..."></path>
</svg>
<svg tabindex="0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Set score 3" class="icon icon_xl icon_no-stroke star-icon star-icon_hoverable">
<path d="..."></path>
</svg>
<svg tabindex="0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Set score 4" class="icon icon_xl icon_no-stroke star-icon star-icon_hoverable">
<path d="..."></path>
</svg>
<svg tabindex="0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Set score 5" class="icon icon_xl icon_no-stroke star-icon star-icon_hoverable">
<path d="..."></path>
</svg>
</div>
</div>
</div>
</star-rating-control>