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**| 26| indicator | boolean | No| Whether the component is used only as an indicator and cannot be operated.<br>Default value: **false**| 27 28 29## Attributes 30 31| Name| Type| Description| 32| -------- | -------- | -------- | 33| stars | number | Total number of stars.<br>Default value: **5**<br>Since API version 9, this API is supported in ArkTS widgets.| 34| stepSize | number | Step of an operation.<br>Default value: **0.5**<br>Since API version 9, this API is supported in ArkTS widgets.| 35| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.<br>**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.<br>**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.<br>Since API version 9, this API is supported in ArkTS widgets.| 36 37 38## Events 39 40| Name| Description| 41| -------- | -------- | 42| onChange(callback:(value: number) => void) | Triggered when the rating value changes.<br>Since API version 9, this API is supported in ArkTS widgets.| 43 44## Example 45 46### Example 1 47 48```ts 49// xxx.ets 50@Entry 51@Component 52struct RatingExample { 53 @State rating: number = 3.5 54 55 build() { 56 Column() { 57 Column() { 58 Rating({ rating: this.rating, indicator: false }) 59 .stars(5) 60 .stepSize(0.5) 61 .margin({ top: 24 }) 62 .onChange((value: number) => { 63 this.rating = value 64 }) 65 Text('current score is ' + this.rating) 66 .fontSize(16) 67 .fontColor('rgba(24,36,49,0.60)') 68 .margin({ top: 16 }) 69 }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) 70 71 Row() { 72 Image('common/testImage.jpg') 73 .width(40) 74 .height(40) 75 .borderRadius(20) 76 .margin({ left: 24 }) 77 Column() { 78 Text('Yue') 79 .fontSize(16) 80 .fontColor('#182431') 81 .fontWeight(500) 82 Row() { 83 Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 }) 84 Text('2021/06/02') 85 .fontSize(10) 86 .fontColor('#182431') 87 } 88 }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) 89 90 Text('1st Floor') 91 .fontSize(10) 92 .fontColor('#182431') 93 .position({ x: 295, y: 8 }) 94 }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) 95 }.width('100%').height('100%').backgroundColor('#F1F3F5') 96 } 97} 98``` 99 100 101 102### Example 2 103 104```ts 105// xxx.ets 106@Entry 107@Component 108struct RatingExample { 109 @State rating: number = 3.5 110 111 build() { 112 Column() { 113 Rating({ rating: this.rating, indicator: false }) 114 .stars(5) 115 .stepSize(0.5) 116 .starStyle({ 117 backgroundUri: '/common/imag1.png', // The common folder is at the same level as pages. 118 foregroundUri: '/common/imag2.png', 119 secondaryUri: '/common/imag3.png' 120 }) 121 .margin({ top: 24 }) 122 .onChange((value: number) => { 123 this.rating = value 124 }) 125 Text('current score is ' + this.rating) 126 .fontSize(16) 127 .fontColor('rgba(24,36,49,0.60)') 128 .margin({ top: 16 }) 129 }.width('100%').height('100%').backgroundColor('#F1F3F5') 130 } 131} 132``` 133 134 135
