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>
  );
}