#Group
#Import
import { Group } from 'bumbag';
#Usage
The <Group>
component groups components together with their respective border-radius
.
Hello
#Vertical groups
A group can also be aligned vertically.
Hello
#Responsive breakpoint
A group can snap from horizontal to vertical after a given breakpoint with the verticalBelow
prop.
Try drag the viewport with the slider!
#Props
#Group Props
borderRadius
string
Sets the border radius of the group.
orientation
"horizontal" | "vertical"
Sets the orientation of the group.
verticalBelow
"tablet" | "mobile" | "fullHD" | "widescreen" | "desktop" | "min-fullHD" | "max-fullHD" | "min-widescreen" | "max-widescreen" | "min-desktop" | "max-desktop" | "min-tablet" | "max-tablet" | "min-mobile" | "max-mobile"
Sets the breakpoint at which the group should snap to be vertical.
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
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Theming
Group.styles.base
Group.Item.styles.base
Group.Item.styles.first
Group.Item.styles.middle
Group.Item.styles.last