Shows beautiful stars used as notation on your pages!
Overview
Use the star rating to show notation, a typical example is to use them for user reviews.
Usage
Dependencies
To get the star component working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
@import 'design-system/src/scss/01-atoms/star-rating';
// Add this dependency only if you want the tooltip on hover / focus
@import 'design-system/src/scss/01-atoms/tooltip';
include /node_modules/design-system/src/pug/01-atoms/star-rating
//- Add this dependency only if you want the tooltip on hover / focus
include /node_modules/design-system/src/pug/01-atoms/tooltip
// Add this dependency only if you want the tooltip on hover / focus
import tooltips from 'design-system/src/js/01-atoms/tooltip';
Basic code
A star rating component is composed by a
div
which has the class
star-rating
and a
title
attribute showing the rating. It contains one another
div
with the class
star-rating__rating
reflecting the rating. The parent
div
is used for empty stars and the child for filled ones.
<!-- Normal version -->
<div class="star-rating star-rating--md" title="4/5">
<div class="star-rating__rating" style="width:80%" aria-hidden="true"></div>
</div>
<!-- Tooltip version -->
<div class="star-rating star-rating--md" title="4/5" data-toggle="tooltip" tabindex="0">
<div class="star-rating__rating" style="width:80%" aria-hidden="true"></div>
</div>
//- Normal version
.star-rating.star-rating--sm(title='4/5')
.star-rating__rating(style='width:80%', aria-hidden='true')
//- Tooltip version
.star-rating.star-rating--sm(title='4/5', data-toggle='tooltip', tabindex='0')
.star-rating__rating(style='width:80%', aria-hidden='true')
// Tooltip version only
tooltip();
Pug mixin
A pug mixin is available to implement the star rating with ease, find the parameters below:
+star-rating(size, rating, tooltip)
| # | Name | Default | Required | Description |
|---|---|---|---|---|
| 1 | size |
'md' |
Yes | Set the size of the star rating:
xs
,
sm
,
md
,
lg
,
xl.
|
| 2 | rating |
4 |
Yes | Set the rating value. |
| 3 | tooltip |
false |
No | Allow to show a tooltip on hover / focus with the value of the rating. |
Modifiers
Add the following modifier to change the appearance of a star rating.
Size
Size modifier comes in 5 variants and allows you to change the size of the stars making it smaller or bigger.
Extra small (xs)
Small (sm)
Medium
Large
Extra large
<!-- Extra small -->
<div class="star-rating star-rating--xs" title="4/5">
<!-- Small -->
<div class="star-rating star-rating--sm" title="4/5">
<!-- Medium -->
<div class="star-rating star-rating--md" title="4/5">
<!-- Large -->
<div class="star-rating star-rating--lg" title="4/5">
<!-- Extra large -->
<div class="star-rating star-rating--xl" title="4/5">
//- Extra small
.star-rating.star-rating--xs(title='4/5')
//- Small
.star-rating.star-rating--sm(title='4/5')
//- Medium
.star-rating.star-rating--md(title='4/5')
//- Large
.star-rating.star-rating--lg(title='4/5')
//- Extra large
.star-rating.star-rating--xl(title='4/5')