Flex-box
Box
Component responsible for spacings and sizes 📐
jsx
import { Box } from '@semcore/ui/base-components';
<Box />;BoxProps
& {...}| Name | Type | Description |
|---|---|---|
| tag | Custom tag to render | |
| className | string | HTML class name attribute |
| style | HTML style attribute | |
| display | CSS `display` property | |
| inline | boolean | Sets the `inline-block` property |
| boxSizing | boolean | "border-box" | CSS `box-sizing: border-box` property |
| flex | 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). |
| innerOutline | boolean | Flag for render outline inside box |
| invertOutline | boolean | Flag for render inverted outline |
| inAfterOutline | boolean | Flag for render outline in the ::after element |
| 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 |
| inset | string | CSS `inset` property |
| zIndex | number | CSS `z-index` property |
| textAlign | CSS `text-align` property | |
| children | Box content | |
| hoverCursor | Hover cursor | |
| bg | | | | Background |
| borderRadius | | | Border radius |
| border | Border | |
| css | any | Deprecated Old way to add custom style |
| focusRingTopOffset | Focus ring offset (top) | |
| focusRingLeftOffset | Focus ring offset (left) | |
| focusRingRightOffset | Focus ring offset (right) | |
| focusRingBottomOffset | Focus ring offset (bottom) |
Flex
The layout building component is a wrapper over CSS-flex. It inherits all properties from Box.
jsx
import { Flex } from '@semcore/ui/base-components';
<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 | It manages the `flex-direction` property | |
| alignItems | It manages the `align-items` property | |
| alignContent | It manages the `align-content` property | |
| justifyContent | CSS `justify-content` property | |
| gap | CSS `gap` property | |
| rowGap | CSS `gap` property | |
| columnGap | 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). |