1# rating 2 3The **\<rating>** component provides a rating bar used for reviews and ratings. 4 5## Required Permissions 6 7None 8 9## Child Components 10 11Not supported 12 13## Attributes 14 15In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. 16 17 18 19| Name | Type | Default Value | Mandatory | Description | 20| --------- | ------- | ------------- | --------- | ------------------------------------------------------------ | 21| numstars | number | 5 | No | Maximum number of rating stars. | 22| rating | number | 0 | No | Current rating stars. | 23| stepsize | number | 0.5 | No | Step to increment the rating value. | 24| indicator | boolean | false | No | Whether to make the rating icons as an indicator (not-editable by users). | 25 26## Styles 27 28In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. 29 30 31 32| Name | Type | Default Value | Mandatory | Description | 33| --------------- | ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------ | 34| star-background | string | - | No | Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported. | 35| star-foreground | string | - | No | Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported. | 36| 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. | 37| width | \<length>\|\<percentage> | 120 px60 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. | 38| height | \<length>\|\<percentage> | 24px12 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. | 39| rtl-flip | boolean | true | No | Whether the image source is automatically flipped in the RTL text direction. | 40 41>  **NOTE:** You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly. 42 43## Events 44 45In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. 46 47 48 49| Name | Parameter | Description | 50| ------ | ------------------ | ---------------------------------------- | 51| change | { rating: number } | Triggered when the rating value changes. | 52 53## Methods 54 55Methods in [Universal Methods](js-components-common-methods.md) are supported. 56 57## Example 58 59``` 60<!-- xxx.hml --> 61<div class="container"> 62 <rating numstars="5" rating="5" @change="changeRating" id="rating"> 63 </rating> 64</div> 65/* xxx.css */ 66.container { 67 display: flex; 68 justify-content: center; 69 align-items: center; 70} 71rating { 72 width: 200px; 73} 74// xxx.js 75import prompt from '@system.prompt'; 76export default { 77 changeRating(e){ 78 prompt.showToast({ 79 message: e.rating 80 }); 81 } 82} 83``` 84 85
){kind=link}
