Rating

Overview

Use the rating component to visually illustrate a numeric value that represents how people have rated something. Star ratings have been used for everything from restaurants to movies, and can be used by your application too.

The rating component allows you to specify the total number of stars and the rating value. The value can be between 0 and the total number of stars. The component displays ratings in multiples of 0.5, picking the number of full or half stars that is closest to but not greater than the specified value. So a rating value of 3.6 would display as 3-and-a-half stars.

Development

Web component development

Component reference

rui-rating

Implementation

Begin by importing the rui-rating module into your application.

// import into app.module
import '@jha/rui-wc/components/rui-rating/rui-rating-imports';

Use the rui-rating component to display a rating.

<rui-rating [rating]="product.rating"></rui-rating>

Set the isEditable property to true to allow users to select a rating. You can also bind allowClear to true to allow users to clear the current selection.

<rui-rating [rating]="product.rating" [isEditable]="true" [allowClear]="true"></rui-rating>

Angular component development

Component reference

rui-rating

Implementation

Begin by importing the JhaRatingModule module into your application.

// import into app.module
import { JhaRatingModule } from '@jha/jharesponsive/jha-rating';

@NgModule({
    imports: [
        ...
        JhaRatingModule,
        ...
    ]
})

export class AppModule(){}

Use the jha-rating component to display a rating.

<jha-rating [jhaRating]="product.rating"></jha-rating>

Set the jhaIsEditable property to true to allow users to select a rating. You can also bind jhaAllowClear to true to allow users to clear the current selection.

<jha-rating [jhaRating]="product.rating" [jhaIsEditable]="true" [jhaAllowClear]="true"></jha-rating>

Component playground

Design

Figma design

Add empty, half, and full rating components to display the appropriate number of stars in the rating.

Separate the stars in the rating by 2 pixels horizontally. Vertically center the stars in the rating.

Adobe XD design

Add empty, half, and full rating components to display the appropriate number of stars in the rating.

Separate the stars in the rating by 2 pixels horizontally. Vertically center the stars in the rating.