Level#

Import#

import { Level } from 'bumbag';

Usage#

The <Level> component that assists in creating layouts where it's children are evenly spaced.

When the viewport is below tablet, the level will snap to a vertical orientation.

Editable example

Orientation#

A <Level> can be of a vertical orientation with the orientation prop.

Editable example

Vertical breakpoint#

By default, Level will turn vertical under the tablet breakpoint. However, you can change this with the verticalBelow prop.

Try drag the viewport with the slider!

Editable example

You can disable the vertical snapping by setting verticalBelow to null.

Editable example

Vertical spacing#

You can modify the space between the vertical items with the spacing prop.

Editable example

Vertical alignment#

You can modify the alignment of the vertical items with the alignX prop.

Editable example

Props#

Level Props#

orientation "horizontal" | "vertical"

Sets the orientation of the level.

spacing string

Sets the spacing of the level when it snaps to a vertical orientation.

verticalBelow

(string & {})
  | "tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"

Sets the breakpoint at which the level should become vertical; null to disable vertical snapping.

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

Level.styles.base
Copyright © 2021 Jake Moxey