1# Rating 2 3The **\<Rating>** component provides a rating bar. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Rating(options?: { rating: number, indicator?: boolean }) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name | Type | Mandatory | Description | 24| --------- | ------- | ---- | ---------------------------------------- | 25| rating | number | Yes | Value to rate.<br>Default value: **0**<br>Value range: [0, stars]<br>A value less than 0 evaluates to the value **0**. A value greater than the value of **stars** evaluates to the value of **stars**.| 26| indicator | boolean | No | Whether the component is used only as an indicator and cannot be operated.<br>Default value: **false**<br>**NOTE**<br>When **indicator** is set to **true**, the default component height is 12.0 vp, and the component width is calculated as follows: Height x Value of **stars**.<br>When **indicator** is set to **false**, the default component height is 28.0 vp, and the component width is calculated as follows: Height x Value of **stars**.| 27 28 29## Attributes 30 31| Name | Type | Description | 32| --------- | ---------------------------------------- | ---------------------------------------- | 33| stars | number | Total number of ratings.<br>Default value: **5**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.| 34| stepSize | number | Step of an operation.<br>Default value: **0.5**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>Value range: [0.1, stars]| 35| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | Star style.<br>**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.<br>**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.<br>**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).<br>Local and online images are supported, but not **PixelMap** and **Resource** objects.<br>By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.<br>If this parameter is set to **undefined** or an empty string, the **\<Rating>** component loads the default star image source.| 36 37> **NOTE** 38> 39> The drawing area of each rating image is [width/stars, height], wherin **width** and **height** indicate the width and height of the **\<Rating>** component, respectively. 40> 41> To specify the drawing area as a square, you are advised to customize the width and height in this format: [height * stars, height], width = height * stars. 42 43 44## Events 45 46| Name | Description | 47| ---------------------------------------- | ---------------------------------------- | 48| onChange(callback:(value: number) => void) | Triggered when the rating value changes.<br>Since API version 9, this API is supported in ArkTS widgets.| 49 50## Example 51 52### Example 1 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct RatingExample { 59 @State rating: number = 3.5 60 61 build() { 62 Column() { 63 Column() { 64 Rating({ rating: this.rating, indicator: false }) 65 .stars(5) 66 .stepSize(0.5) 67 .margin({ top: 24 }) 68 .onChange((value: number) => { 69 this.rating = value 70 }) 71 Text('current score is ' + this.rating) 72 .fontSize(16) 73 .fontColor('rgba(24,36,49,0.60)') 74 .margin({ top: 16 }) 75 }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) 76 77 Row() { 78 Image('common/testImage.jpg') 79 .width(40) 80 .height(40) 81 .borderRadius(20) 82 .margin({ left: 24 }) 83 Column() { 84 Text('Yue') 85 .fontSize(16) 86 .fontColor('#182431') 87 .fontWeight(500) 88 Row() { 89 Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 }) 90 Text('2021/06/02') 91 .fontSize(10) 92 .fontColor('#182431') 93 } 94 }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) 95 96 Text('1st Floor') 97 .fontSize(10) 98 .fontColor('#182431') 99 .position({ x: 295, y: 8 }) 100 }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) 101 }.width('100%').height('100%').backgroundColor('#F1F3F5') 102 } 103} 104``` 105 106 107 108### Example 2 109 110```ts 111// xxx.ets 112@Entry 113@Component 114struct RatingExample { 115 @State rating: number = 3.5 116 117 build() { 118 Column() { 119 Rating({ rating: this.rating, indicator: false }) 120 .stars(5) 121 .stepSize(0.5) 122 .starStyle({ 123 backgroundUri: '/common/imag1.png', // The common folder is at the same level as pages. 124 foregroundUri: '/common/imag2.png', 125 secondaryUri: '/common/imag3.png' 126 }) 127 .margin({ top: 24 }) 128 .onChange((value: number) => { 129 this.rating = value 130 }) 131 Text('current score is ' + this.rating) 132 .fontSize(16) 133 .fontColor('rgba(24,36,49,0.60)') 134 .margin({ top: 16 }) 135 }.width('100%').height('100%').backgroundColor('#F1F3F5') 136 } 137} 138``` 139 140 141
