#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"
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
Stack.styles.base
Stack.styles.child.base
Stack.styles.vertical
Stack.styles.child.vertical
Stack.styles.horizontal
Stack.styles.child.horizontal