import { RatingAccumulator } from '@uhg-abyss/mobile';Data
The data prop is an array of numbers representing percentages for each star rating level, from 1 star (index 0) to 5 stars (index 4).
Alternate Theme
The alt prop changes the color theme to an alternate style, useful for displaying against darker backgrounds.
RatingAccumulator Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
alt | boolean | undefined | false | - | Toggle color theme for use on darker backgrounds |
data | number[] | - | Array of percentages for star ratings (1★ to 5★) |
RatingAccumulator Classes
Extends Abyss - Accumulator Classes
| Class Name | Description |
|---|---|
| abyss-rating-accumulator-root | RatingAccumulator root element |
| abyss-rating-accumulator | Accumulator element class |
| abyss-rating-accumulator-percentage-label | RatingAccumulator percentage label element |
| abyss-rating-accumulator-stars-label | RatingAccumulator stars label element |
RatingAccumulator Translations
| Translation Key | Value |
|---|---|
| RatingAccumulator.star | {{starCount}} Star |
| RatingAccumulator.stars | {{starCount}} Stars |
Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.
RatingAccumulator Tokens
| Token Name | Value | |
|---|---|---|
| rating-accumulator-group.color.surface.accumulator.regular | #F5B700 | |
| rating-accumulator-group.color.surface.accumulator.alt | #FFFFFF | |
| rating-accumulator-group.color.text.stars.regular | #4B4D4F | |
| rating-accumulator-group.color.text.stars.alt | #FFFFFF | |
| rating-accumulator-group.color.text.percentage.regular | #4B4D4F | |
| rating-accumulator-group.color.text.percentage.alt | #FFFFFF | |
| rating-accumulator-group.color.border.accumulator.regular | #D2800F | |
| rating-accumulator-group.color.border.accumulator.alt | #FFFFFF | |
| rating-accumulator-group.spacing.gap.vertical.container | 12 | |
| rating-accumulator-group.spacing.gap.horizontal.row | 8 |