Homecomponentsinformational

Rating

A visual cue for displaying ratings.


Use Rating to show ratings on profiles, projects, etc.

Rating

Use the rating property to provide the rating value. It will fill the appropriate number of stars with color. Rating values are rounded to decide the number of stars to be filled. For example, 4.2 will fill 4 stars, whereas 4.5 will fill 5 stars.

4.2
4.6

Size

Use the size property to size the ratings.

small
medium
large
xlarge
xxlarge

Color

Use the color property to color the stars.

Default
Rating

Rating Label

Use the showRating property to display rating value beside the stars. This property is only effective for the small and medium size.

4.2

Grading

Use the grading property to add textual description to the rating number when showRating is applied. At present, we only show grading with the text rating.

Excellent!
4.7

Number of Reviews

Use the reviewsCount property to show number of reviews beside the stars. This property is only effective for the small and medium size.

(123)

Collapse To Single Star

Use the collapseBelow property to show only a single rating star below a given size. This is useful for smaller sizes.

4.2

Example

With text rating and number of reviews

English Classes

Here's the review left by Jenny.
4.2
(123)
“I had a really good experience learning English with this class.”

API

rating
Required
The rating value. Should be a number between 0 and 5.
number

size
The size of the stars.
inherit
none
small
medium
large
xxlarge
xlarge
xsmall
xxsmall

color
The color of the stars.
default
rating

showRating
Show the rating besides the stars.
true
false

reviewsCount
The amount of reviews. Also displays it.
number

collapseBelow
Collapse to show a single star below this size.
number

grading
The textual description of the rating.
string

data
An object with the data keys and values.
DataAttributeMap