Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Our Rating Web Component allows you to easily integrate a customizable star rating system, providing an interactive and visually appealing way to gather and display user feedback.
<post-rating></post-rating>
| Name | Description | Default | Control |
|---|---|---|---|
| props | |||
| label | Defines a hidden label for the component. string | 'Rating' | |
| stars | Defines the total amount of stars rendered in the component. number | 5 | |
| currentRating | Defines the rating that the component should show. number | 0 | |
| readonly | Defines if the component is readonly or not.
This usually should be used together with the boolean | false | |
| events | |||
| change | An event emitted whenever the component's value has changed (on blur).
The event payload can be used like so: { value: number; } | - | - |
| input | An event emitted whenever the component's value has changed (on input).
The event payload can be used like so: { value: number; } | - | - |
The <post-rating/> element is part of the @swisspost/design-system-components package.
For more information, read the getting started with components guide.
const rating = document.querySelector('post-rating') as HTMLPostRatingElement; rating.addEventListener('input', event => { // use event.detail.value for whatever you like }); rating.addEventListener('change', event => { // use event.detail.value for whatever you like });