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**.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 26| indicator | boolean | No | Whether the component is used only as an indicator.<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 or equal to 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.1 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>**secondaryUri**: 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 **starStyle** 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 **backgroundUri** or **foregroundUri** is set to **undefined** or an empty string, the **\<Rating>** component loads the default star image source.<br>If **secondaryUri** is set to **undefined** or an empty string or is not set, **backgroundUri** is prioritized, which is equivalent to where only **foregroundUri** and **backgroundUri** are set.| 36 37> **NOTE** 38> 39> The drawing area of each rating image is [width/stars, height], wherein **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## Sequential Keyboard Navigation Specifications 51| Key | Description | 52|------------|-----------------------------| 53| Tab | Switch the focus between components. | 54| Left and right arrow keys | Increase or decrease the rating on preview at the specified step, without changing the actual rating.| 55| Home | Move the focus to the first star, without changing the actual rating. | 56| End | Move the focus to the last star, without changing the actual rating. | 57| Space/Enter | Submit the rating result based on the current rating. | 58 59## Example 60 61### Example 1 62 63```ts 64// xxx.ets 65@Entry 66@Component 67struct RatingExample { 68 @State rating: number = 3.5 69 70 build() { 71 Column() { 72 Column() { 73 Rating({ rating: this.rating, indicator: false }) 74 .stars(5) 75 .stepSize(0.5) 76 .margin({ top: 24 }) 77 .onChange((value: number) => { 78 this.rating = value 79 }) 80 Text('current score is ' + this.rating) 81 .fontSize(16) 82 .fontColor('rgba(24,36,49,0.60)') 83 .margin({ top: 16 }) 84 }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) 85 86 Row() { 87 Image('common/testImage.jpg') 88 .width(40) 89 .height(40) 90 .borderRadius(20) 91 .margin({ left: 24 }) 92 Column() { 93 Text('Yue') 94 .fontSize(16) 95 .fontColor('#182431') 96 .fontWeight(500) 97 Row() { 98 Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 }) 99 Text('2021/06/02') 100 .fontSize(10) 101 .fontColor('#182431') 102 } 103 }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) 104 105 Text('1st Floor') 106 .fontSize(10) 107 .fontColor('#182431') 108 .position({ x: 295, y: 8 }) 109 }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) 110 }.width('100%').height('100%').backgroundColor('#F1F3F5') 111 } 112} 113``` 114 115 116 117### Example 2 118 119```ts 120// xxx.ets 121@Entry 122@Component 123struct RatingExample { 124 @State rating: number = 3.5 125 126 build() { 127 Column() { 128 Rating({ rating: this.rating, indicator: false }) 129 .stars(5) 130 .stepSize(0.5) 131 .starStyle({ 132 backgroundUri: '/common/imag1.png', // The common folder is at the same level as pages. 133 foregroundUri: '/common/imag2.png', 134 secondaryUri: '/common/imag3.png' 135 }) 136 .margin({ top: 24 }) 137 .onChange((value: number) => { 138 this.rating = value 139 }) 140 Text('current score is ' + this.rating) 141 .fontSize(16) 142 .fontColor('rgba(24,36,49,0.60)') 143 .margin({ top: 16 }) 144 }.width('100%').height('100%').backgroundColor('#F1F3F5') 145 } 146} 147``` 148 149 150
