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

PropDescriptionOptions / Example
heightHeight of layout component.string
"120px"
shape
{
Min: "120px",
Max: "500px",
}
widthWidth of layout component.string
"120px"
shape
{
Min: "120px",
Max: "500px",
}
marginThe amount of margin around the componentoneOf
'5px'
overflowOverflow of content for the boxoneOf
"auto", "hidden", "scroll", "visible"

shape
{
horizontal: "auto", "hidden", "scroll", "visible",
vertical: "auto", "hidden", "scroll", "visible"
}
backgroundColorBox backgroundColorstring
borderBorder to be dispalyed around the chartboolean
oneOf
"top"
"left"
"bottom"
"right"
"start"
"end"
"horizontal"
"vertical"
"all"
"between"
"none"
borderRadiusBorder radius of the border around the boxstring
paddingPadding around the chartstring
alignAlign the contents along the cross axisoneOf
"start"
"center"
"end"
"baseline"
"stretch"
alignContentAlign the contents when there is extra space in the cross axisoneOf
"start"
"center"
"end"
"between"
"around"
"stretch"
justifyJustify the contents along the cross axisoneOf
"around"
"between"
"center"
"end"
"evenly"
"start"
"stretch"
justifyContentJustify the contents when there is extra space in the cross axisoneOf
"around"
"between"
"center"
"end"
"start"
"stretch"
directionSets flex-direction. The direction to layout child componentsoneOf
"row"
"column"
"row-responsive"
"row-reverse"
"column-reverse"
flexSets flex-direction. The direction to layout child componentsoneOf
"grow"
"shrink"
boolshape
{
grow: number
shrink: number
}
focusableWhether focus should be applied to the boxbool
basisA fixed or relative size along its container's main axisstring
wrapPropwhether children are wrapped in the box containeroneOfbool
"reverse"
elevationSetting the box shadow css propertystring
onClickOnClick callback functionfunction
gridAreaName of the parent grid area to place the boxstring

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