import { Rating } from '@uhg-abyss/mobile';<Rating rating={3} reviews={5} />Variants
Variant small contains the rating to the left side of the populated stars and the number of reviews to the right.
Variant single consists of a single star with the rating and reviews in parentheses on the right side.
Variant large has a heading style rating value followed by the reviews and stars underneath.
If a variant is not provided it defaults to small.
Advanced Layout and Manipulation
rating is required and is used to determine the number of active stars as well as the display number. The inputted rating will be formatted to the first decimal point.
The onPress prop is optional and will transform the review text into a pressable link.
Hide Reviews and Rating
hideRating can be used with variant small to hide the rating number on the left side.
hideReviews can be used with variants small and single to hide the reviews text.
Rating Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| hideRating | boolean | false | Hides rating number |
| hideReviews | boolean | false | Hides review text |
| onPress | function | - | Function called on link press |
| rating | number | 0 | Rating given to component between 0-5 |
| reviews | number | 0 | Number of reviews |
| variant | 'small' | 'large' | 'single' | large | Defines the rating variant |
Rating Classes
| Class Name | Description |
|---|---|
| abyss-rating-number | The numerical value displayed next to or above the stars |
| abyss-rating-root | Rating root |
| abyss-rating-star | Each individual star |
| abyss-rating-star-border | Border for an individual star |
| abyss-rating-star-container | Wrapper for an individual star |
| abyss-rating-stars-container | Container wrapping the stars |
| abyss-rating-text | The text/link to the right of the stars |
Rating Tokens
| Token Name | Value | |
|---|---|---|
| rating.color.surface.icon.filled | #F5B700 | |
| rating.color.text.average.lg.regular | #002677 | |
| rating.color.text.average.lg.alt | #FFFFFF | |
| rating.color.text.average.sm.regular | #4B4D4F | |
| rating.color.text.average.sm.alt | #FFFFFF | |
| rating.color.text.reviews.lg.regular | #4B4D4F | |
| rating.color.text.reviews.lg.alt | #FFFFFF | |
| rating.color.text.reviews.sm.regular | #4B4D4F | |
| rating.color.text.reviews.sm.alt | #FFFFFF | |
| rating.color.border.icon.filled | #D2800F | |
| rating.color.border.icon.default.regular | #4B4D4F | |
| rating.color.border.icon.default.alt | #FFFFFF | |
| rating.sizing.all.icon.star.lg | 24 | |
| rating.sizing.all.icon.star.sm | 16 | |
| rating.spacing.gap.horizontal.text.lg | 8 | |
| rating.spacing.gap.horizontal.rating-container.sm | 4 |