#Rating
The <Rating>
component displays a set of selectable (or static) rating stars.
#Import
import { Rating } from 'bumbag';
#Usage
#Static
Render a set of static unselectable stars with the isStatic
prop.
#Disabled
Disable the selectable stars with a disabled
prop.
#Sizes
#Max rating
#Custom items
#Accessibility
#Patterns
Rating
extends the accessibility features of the RadioGroup component.- The
aria-checked
attribute is set totrue
on the item which is currently selected. - The
aria-posinset
attribute is set to the position of the rating item. - The
aria-setsize
attribute is set to the max value of the rating set. - The
Rating.Item
has a role ofradio
.
#Props
#Rating Props
color
string
Sets the color of the rating items.
disabled
boolean
Indicates if the rating is disabled.
item
ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Sets the custom item component.
items
ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>[]
Sets the items of the rating.
isSingular
boolean
Indicates if the rating is radio.
isStatic
boolean
Indicates the rating is static.
maxValue
number
Sets the max value.
onChange
(index: number) => void
Required
Function to invoke when the rating has changed.
size
"default" | (string & {}) | "small" | "medium" | "large"
Sets the size of the rating items.
value
number | void
Required
Sets the value of the rating.
roverProps
{ baseId?: string; stopId?: string; }
Inherits Flex
props
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"left" | "right" | "center"
alignY
"bottom" | "top" | "center"
altitude
string
variant
string
colorMode
string
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Theming
Rating.styles.base
Rating.Item.styles.base