Rating
The <Rating> component provides a rating bar.
NOTE
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
Not supported
APIs
Rating(options?: { rating: number, indicator?: boolean })
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| rating | number | Yes | Value to rate. Default value: 0 |
| indicator | boolean | No | Whether the component is used only as an indicator and cannot be operated. Default value: false |
Attributes
| Name | Type | Description |
|---|---|---|
| stars | number | Total number of stars. Default value: 5 |
| stepSize | number | Step of an operation. Default value: 0.5 |
| starStyle | { backgroundUri: string, foregroundUri: string, secondaryUri?: string } |
backgroundUri: image link of the unselected star. You can use the default image or a custom local image. foregroundUri: image path of the selected star. You can use the default image or a custom local image. secondaryUir: image path of the partially selected star. You can use the default image or a custom local image. |
Events
| Name | Description |
|---|---|
| onChange(callback:(value: number) => void) | Triggered when the rating value changes. |
Example
// xxx.ets
@Entry
@Component
struct RatingExample {
@State rating: number = 1
@State indicator: boolean = false
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('current score is ' + this.rating).fontSize(20)
Rating({ rating: this.rating, indicator: this.indicator })
.stars(5)
.stepSize(0.5)
.onChange((value: number) => {
this.rating = value
})
}.width(350).height(200).padding(35)
}
}
