Stack#
Import#
import { Stack } from 'bumbag';
Usage#
The <Stack>
component that assists in creating layouts where it's children are evenly spaced.
Gap#
You can specify a gap spacing on your <Stack>
with the spacing
prop.
Vertical breakpoints#
You can set a verticalBelow
breakpoint, in which the horizontal stack will switch to a vertical orientation under the specified breakpoint.
Try drag the viewport with the slider
Alignments#
Horizontal alignment#
Vertical alignment#
Stack Props#
orientation
"horizontal" | "vertical"
Sets the orientation of the stack component.
spacing
string
Sets the spacing between the stack items.
verticalBelow
string
Indicates the breakpoint at which the stack should become vertical.
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
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
Theming#
Stack.styles.base
Stack.styles.child.base
Stack.styles.vertical
Stack.styles.child.vertical
Stack.styles.horizontal
Stack.styles.child.horizontal