View on Git

RatingStars

Shows a static rating of a course or education program

Example

import { RatingStars } from '@seduo/design-system';
...
<RatingStars size="large" />
<RatingStars stars={2} size="large" />
<RatingStars stars={4} size="large" />
<RatingStars stars={4} size="large" />
<RatingStars stars={5} size="large" />
...
<RatingStars />
<RatingStars stars={2} />
<RatingStars stars={3} />
<RatingStars stars={4} />
<RatingStars stars={5} />
...
<RatingStars stars={4} description="Rating 80%" />
...
<a href="#">
    <RatingStars stars={2.5} description="Rating 50%" />
</a>

{% include "@seduo-design-system/ratingStars.twig" with { props: {
    stars: '3.5'
}} %}

<RatingStars size="large" />
<RatingStars stars={2} size="large" />
<RatingStars stars={4} size="large" />
<RatingStars stars={4} size="large" />
<RatingStars stars={5} size="large" />
...
<RatingStars />
<RatingStars stars={2} />
<RatingStars stars={3} />
<RatingStars stars={4} />
<RatingStars stars={5} />
...
<RatingStars stars={4} description="Rating 80%" />
...
<a href="#">
    <RatingStars stars={2.5} description="Rating 50%" />
</a>

API

Prop name	Type	Default	Required	Description
`stars`	`number`	0	no	rating stars
`limit`	`number`	5	no	limit of stars in rating
`size`	`medium`, `large`	`medium`	no	rating size
`description`	`string`	-	no	description text
`UNSAFE_className`	`string`	-	no	Wrapper custom classname

Clickable (only React implementation)

if is property onClick defined as function the component automatically switched to clickable.

examples

import { RatingStars } from '@seduo/design-system';
...
<RatingStars size="large" onClick={(star) => alert(`selected star value is: ${star}`) } />
<RatingStars onClick={(star) => alert(`selected star value is: ${star}`) } />

Clickable Properties

Prop name	Type	Default	Required	Description
`onClick`	`Function`	-	no	return selected star value

On this page