rating
The <rating> component provides a rating bar used for reviews and ratings.
Required Permissions
None
Child Components
Not supported
Attributes
In addition to the attributes in 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
|
Current rating stars.
|
stepsize
|
number
|
0.5
|
No
|
Step to increment 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 styles in 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>
|
120 px
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
12 px (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 events in Universal Events, the following events are supported.
Name
|
Parameter
|
Description
|
|---|
change
|
{ rating: number }
|
Triggered when the rating value changes.
|
Methods
Methods in Universal Methods are supported.
Example
<div class="container">
<rating numstars="5" rating="5" @change="changeRating" id="rating">
</rating>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
}
rating {
width: 200px;
}
import prompt from '@system.prompt';
export default {
changeRating(e){
prompt.showToast({
message: e.rating
});
}
}
