Box

Box description.

Props

Box properties

Property	Description	Type	Default
center	Should the children of the box be centered?	`boolean`	false
bg	Set box background color	`string`
debug	Highlight box on the screen, useful for debug purposes	`boolean`	false
width	What width should the box be?	`string`, `number`
height	Set the box height	`string`, `number`
pt	Set box top padding	`number`
pb	Set box bottom padding	`number`
pl	Set box left padding	`number`
pr	Set box right padding	`number`
px	Set box padding on the horizontal axis	`number`
py	Set box padding on the vertical axis	`number`
pd	Set box padding on the both axis	`number`
mt	Set box top margin	`number`
mb	Set box bottom margin	`number`
ml	Set box left margin	`number`
mr	Set box right margin	`number`
mx	Set box margin on the horizontal axis	`number`
my	Set box margin on the vertical axis	`number`
mg	Set box margin on the both axis	`number`
overflow	Set the box overflow	`visible` `hidden` `scroll` `scrollX` `scrollY` `auto`	auto
position	Set box position	`static` `absolute` `relative` `fixed`	-
role	Set the box ARIA role	`article` `aside` `details` `div` `figcaption` `figure` `footer` and more	auto

Usage

Basic Box

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={600}>
      <Box height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box height={100} width={200} bg="#82CAFF" />
        <Box height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={600}>
      <Box height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box height={100} width={200} bg="#82CAFF" />
        <Box height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Center

import { Box, Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width="40%" bg="#1589FF">
      <Box center py={32} px={32}>
        <Image
          width="100%"
          src="https://source.unsplash.com/V_WBdOLOgJU/300x300"
          alt="woman in orange knit cap and blue jacket"
        />
      </Box>
    </Box>
  </BrowserWindow>
);

import { Box, Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width="40%" bg="#1589FF">
      <Box center py={32} px={32}>
        <Image
          width="100%"
          src="https://source.unsplash.com/V_WBdOLOgJU/300x300"
          alt="woman in orange knit cap and blue jacket"
        />
      </Box>
    </Box>
  </BrowserWindow>
);

Debug

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box debug p={16} center width={500}>
      <Box debug m={8} border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box debug m={8} border height={100} width={200} bg="#82CAFF" />
        <Box debug m={8} height={100} width={300} bg="#1589FF" />
        <Box debug m={8} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box debug m={8} border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box debug p={16} center width={500}>
      <Box debug m={8} border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box debug m={8} border height={100} width={200} bg="#82CAFF" />
        <Box debug m={8} height={100} width={300} bg="#1589FF" />
        <Box debug m={8} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box debug m={8} border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Padding

Top, Bottom, Left and Right Padding

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box
          pt={16}
          pb={16}
          pl={16}
          pr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box
          pt={16}
          pb={16}
          pl={16}
          pr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Horizontal and Vertical Padding

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box px={16} py={40} height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box px={16} py={40} height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Margin

Top, Bottom, Left and Right Margin

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box
          mt={16}
          mb={16}
          ml={16}
          mr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box
          mt={16}
          mb={16}
          ml={16}
          mr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Horizontal and Vertical Margin

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box mx={32} my={16} height={100} width={300} bg="#1589FF" />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box mx={32} my={16} height={100} width={300} bg="#1589FF" />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);