rating

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <rating> component provides a rating bar used for reviews and ratings.

Required Permissions

None

Child Components

Not supported

Attributes

In addition to the universal attributes, the following attributes are supported.

Name Type Default Value Mandatory Description
numstars number 5 No Maximum number of rating stars.
rating number 0 No Number of stars rated.
stepsize number 0.5 No Step to increase the rating value.
indicator boolean false No Whether to make the rating icons as an indicator (not-editable by users).

Styles

In addition to the universal styles, the following styles are supported.

Name Type Default Value Mandatory Description
star-background string - No Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.
star-foreground string - No Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.
star-secondary string - No Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.
width <length>|<percentage> 120px
60 px (cannot be edited)		 No Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.
height <length>|<percentage> 24px
12px (cannot be edited)		 No Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.
rtl-flip boolean true No Whether the image source is automatically flipped in the RTL text direction.

NOTE

You must set star-background, star-secondary, and star-foreground. Otherwise, the rating star is gray, indicating that the image is set incorrectly.

Events

In addition to the universal events, the following events are supported.

Name Parameter Description
change { rating: number } Triggered when the rating value changes.

Methods

The universal methods are supported.

Example

<!-- xxx.hml -->
<div class="container">
  <rating numstars="5" rating="5" @change="changeRating" id="rating">
  </rating>
</div>

/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
rating {
  width: 200px;
}

// xxx.js
import prompt from '@system.prompt';
export default {
    changeRating(e){
        prompt.showToast({
            message: e.rating
        });
    }
}

1-6