Developer Box
Component responsible for spacings and sizes 📐
jsx
import { Box } from 'intergalactic/flex-box';
<Box />;import { Box } from 'intergalactic/flex-box';
<Box />;BoxProps
& {...}| Name | Type | Description |
|---|---|---|
| display | Property.Display | CSS `display` property |
| inline | boolean | Sets the `inline-block` property |
| boxSizing | boolean | "border-box" | CSS `box-sizing: border-box` property |
| flex | Property.Flex<string> | CSS `flex` property |
| m | number | string | CSS `margin` property |
| mt | number | string | CSS `margin-top` property |
| mr | number | string | CSS `margin-right` property |
| mb | number | string | CSS `margin-bottom` property |
| ml | number | string | CSS `margin-left` property |
| mx | number | string | CSS `margin-left` and `margin-right` property |
| my | number | string | CSS `margin-top` and `margin-bottom` property |
| p | number | string | CSS `padding` property |
| pt | number | string | CSS `padding-top` property |
| pr | number | string | CSS `padding-right` property |
| pb | number | string | CSS `padding-bottom` property |
| pl | number | string | CSS `padding-left` property |
| px | number | string | CSS `padding-left` and `padding-right` property |
| py | number | string | CSS `padding-top` and `padding-bottom` property |
| w | number | string | CSS `width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is. |
| wMin | number | string | CSS `min-width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is. |
| wMax | number | string | CSS `max-width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is. |
| h | number | string | CSS `height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is. |
| hMin | number | string | CSS `min-height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is. |
| hMax | number | string | CSS `max-height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is. |
| scaleIndent | number | Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12). |
| css | React.CSSProperties | Property for specifying css properties in js |
| position | Property.Position | CSS `position` property |
| top | number | string | CSS `top` property |
| left | number | string | CSS `left` property |
| bottom | number | string | CSS `bottom` property |
| right | number | string | CSS `right` property |
| zIndex | number | |
| children | React.ReactNode |
Flex
The layout building component is a wrapper over CSS-flex. It inherits all properties from Box.
jsx
import { Flex } from 'intergalactic/flex-box';
<Flex />;import { Flex } from 'intergalactic/flex-box';
<Flex />;FlexProps
& {...}| Name | Type | Description |
|---|---|---|
| inline | boolean | It manages the `inline-flex` property |
| reverse | boolean | Adds the `reverse` property to `flex-direction` |
| flexWrap | boolean | It manages the `flex-wrap` property |
| direction | Property.FlexDirection | It manages the `flex-direction` property |
| alignItems | Property.AlignItems | It manages the `align-items` property |
| alignContent | Property.AlignContent | It manages the `align-content` property |
| justifyContent | Property.JustifyContent | CSS `justify-content` property |
| gap | Property.Gap<number> | CSS `gap` property |
| rowGap | Property.RowGap<number> | CSS `gap` property |
| columnGap | Property.ColumnGap<number> | CSS `gap` property |
| scaleIndent | number | Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12). |