0.10.1 • Published 3 years ago
Share package Boxi Boxi is a library that allows you to specify styles such as margins and padding for Div elements.Material-ui Box.
Tags react
Advantages You can pass properties such as margins, padding, colors, and alignment to the Div element. It's easier to write than inline style. Written in CSS in JS using Emotion, it should have a performance advantage over inline style. (Unmeasured) Installation yarn
yarn add boxinpm
npm install boxiUsage import Box from 'boxi';
// You can define any props as below
const Component = () => <Box m="4px">Children</Box>;API borders Prop CSS property border border borderTop border-top borderLeft border-left borderRight border-right borderBottom border-bottom borderColor border-color borderRadius border-radius
<Box border="1px" borderColor="red"></Box>
<Box borderTop="1px"></Box>display Prop CSS property display display overflow overflow textOverflow text-overflow visiblity visiblity whiteSpace white-space
<Box whiteSpace="nowrap"></Box>flexbox Prop CSS property flexBasis flex-basis flexDirection flex-direction flexWrap flex-wrap justifyContent justify-content justifyItems justify-items justifySelf justify-self alignItems align-items alignContent align-content order order flex flex flexGrow flex-grow flexShrink flex-shrink alignSelf align-self
<Box display="flex" justifyContent="space-between" alignItems="center">
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
</Box>palette Prop CSS property color color background background backgroundColor background-color
<Box color="red" backgroundColor="gray">
colored box
</Box>positions Prop CSS property position position zIndex z-index top top right right bottom bottom left left
<Box zIndex="1000"></Box>shadows Prop CSS property boxShadow boxShadow
<Box boxShadow="10px 10px 10px 10px rgba(0,0,0,0.4)"></Box>sizing Prop CSS property width width maxWidth max-width minWidth min-width height height maxHeight max-height minHeight min-height boxSizing box-sizing
<Box width="100%"></Box>
<Box height="100px"></Box>spacing Prop CSS property m margin mt margin-top mr margin-right mb margin-bottom ml margin-left mx margin-left, margin-right my margin-top, margin-bottom p padding pt padding-top pr padding-right pb padding-bottom pl padding-left px padding-left, padding-right py padding-top, padding-bottom
<Box mt="10px">text</Box>
<Box px="10px">text</Box>Some people find the prop shorthand confusing, you can use the full version if you prefer:
<Box marginTop="10px">text</Box>
<Box paddingX="10px">text</Box>typography Prop CSS property fontFamily font-family fontSize font-size fontStyle font-style fontWeight font-weight latterSpacing letter-spacing lineHeight line-height textAlign text-align
<Box textAlign="center">text</Box>Contributors 
