Box

Box Layout. A Box Wrapper for Components#

Usage#

A Flexbox for wrapping content.

import { Box } from @motor-js/core
//...
<Box height="80px" backgroundColor="#FF6961" margin="10px" />

Props#

info

This component does not require connection to a Qlik engine

Prop	Description	Options / Example
`height`	Height of layout component.	`string` "120px" `shape` { Min: "120px", Max: "500px", }
`width`	Width of layout component.	`string` "120px" `shape` { Min: "120px", Max: "500px", }
`margin`	The amount of margin around the component	`oneOf` '5px'
`overflow`	Overflow of content for the box	`oneOf` "auto", "hidden", "scroll", "visible" `shape` { horizontal: "auto", "hidden", "scroll", "visible", vertical: "auto", "hidden", "scroll", "visible" }
`backgroundColor`	Box backgroundColor	`string`
`border`	Border to be dispalyed around the chart	`boolean` `oneOf` "top" "left" "bottom" "right" "start" "end" "horizontal" "vertical" "all" "between" "none"
`borderRadius`	Border radius of the border around the box	`string`
`padding`	Padding around the chart	`string`
`align`	Align the contents along the cross axis	`oneOf` "start" "center" "end" "baseline" "stretch"
`alignContent`	Align the contents when there is extra space in the cross axis	`oneOf` "start" "center" "end" "between" "around" "stretch"
`justify`	Justify the contents along the cross axis	`oneOf` "around" "between" "center" "end" "evenly" "start" "stretch"
`justifyContent`	Justify the contents when there is extra space in the cross axis	`oneOf` "around" "between" "center" "end" "start" "stretch"
`direction`	Sets flex-direction. The direction to layout child components	`oneOf` "row" "column" "row-responsive" "row-reverse" "column-reverse"
`flex`	Sets flex-direction. The direction to layout child components	`oneOf` "grow" "shrink" `boolshape` { grow: `number` shrink: `number` }
`focusable`	Whether focus should be applied to the box	`bool`
`basis`	A fixed or relative size along its container's main axis	`string`
`wrapProp`	whether children are wrapped in the box container	`oneOfbool` "reverse"
`elevation`	Setting the box shadow css property	`string`
`onClick`	OnClick callback function	`function`
`gridArea`	Name of the parent grid area to place the box	`string`

Sample Syntax#

Box configuration#

<Box height="80px" backgroundColor="#FF6961" margin="10px" />

Example#

An example showing the uses of the box layout component

Boxes nested within each other#

Boxes can be nested within each other to for a grid.

function BoxDemo() {
  let flexDirection = "column";

  const boxProps = {
    backgroundColor: "white",
    border: { color: "brand" },
    margin: "5px",
    borderRadius: "8px",
  };

  return (
    <Box
      padding="10px"
      width="100%"
      overflow="scroll"
      direction={flexDirection}
    >
      <CurrentSelections minHeight="60px" width="100%" />
      <Box width="100%" direction={"column"}>
        <Box flex={true} height={{ min: "120px" }} {...boxProps}></Box>
        <Box flex={true} height={{ min: "120px" }} {...boxProps}></Box>
        <Box flex={true} height={{ min: "120px" }} {...boxProps}></Box>
      </Box>
    </Box>
  );
}