FieldStack#

The <FieldStack> component is a utility belt that wraps around field elements to space them out correctly.

Import#

import { FieldStack } from 'bumbag'

Usage#

Editable example

Props#

FieldStack Props#

Inherits 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#

FieldStack.styles.base
Hello world
Copyright © 2021 Jake Moxey