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