Flex-box and spacing system
Box
Component responsible for spacings and sizes 📐
import { Box } from '@semcore/ui/flex-box';
<Box />;
BoxProps
StyledProps & {...}
Property | Description |
---|---|
inline boolean | Sets the |
boxSizing boolean | "border-box" | CSS |
flex Property.Flex | CSS |
m number | string | CSS |
mt number | string | CSS |
mr number | string | CSS |
mb number | string | CSS |
ml number | string | CSS |
mx number | string | CSS |
my number | string | CSS |
p number | string | CSS |
pt number | string | CSS |
pr number | string | CSS |
pb number | string | CSS |
pl number | string | CSS |
px number | string | CSS |
py number | string | CSS |
w number | string | CSS |
wMin number | string | CSS |
wMax number | string | CSS |
h number | string | CSS |
hMin number | string | CSS |
hMax number | string | CSS |
scaleIndent number = 4 | 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 deprecated v4.0.0 | Property for specifying css properties in js |
position Property.Position | CSS |
top number | string | CSS |
left number | string | CSS |
bottom number | string | CSS |
right number | string | CSS |
zIndex number | |
children React.ReactNode |
Flex
The layout building component is a wrapper over CSS-flex. It inherits all properties from Box
.
import { Flex } from '@semcore/ui/flex-box';
<Flex />;
FlexProps
BoxProps & {...}
Property | Description |
---|---|
inline boolean | It manages the |
reverse boolean | Adds the |
flexWrap boolean | It manages the |
direction Property.FlexDirection | It manages the |
alignItems Property.AlignItems | It manages the |
alignContent Property.AlignContent | It manages the |
justifyContent Property.JustifyContent | CSS |
gap Property.Gap | CSS |
rowGap Property.RowGap | CSS |
columnGap Property.ColumnGap | CSS |
scaleIndent number = 4 | Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12). |