Box component
A layout component using Hedron flexbox layout library.
Install
npm i @wethecurious/wtc-ui-library
Usage
Import it into your project
import { BoxBounds, BoxProvider, BoxBox } from '@wethecurious/wtc-ui-library'
Prop
<BoxBounds direction="vertical">
<Box>Header</Box>
<Box>Content</Box>
<Box>Footer</Box>
</BoxBounds>
BoxBounds
Prop | Description | Default |
---|---|---|
debug | Outlines the grid system so you can visualize the layout | false |
flex | Controls the CSS flex property | |
direction | Sets the primary axis the children should be in line with | horizontal |
wrap | Sets whether the children should wrap when there's no more room on the primary axis | false |
valign | Alignment of children along the vertical axis | |
halign | Alignment of children along the vertical axis | |
justify | Set the justify-content value | |
alignItems | Set the align-items value | |
alignContent | Set the align-content value | |
basis | Set the flex-basis as a string value | |
wrap | Sets the flex-wrap property using FlexWrap.Wrap or FlexWrap.NoWrap |
Box
Prop | Description | Default |
---|---|---|
debug | Outlines the grid system so you can visualize the layout | false |
flex | Controls the CSS flex property | |
fill | Sets whether the Box should fill up all available space | |
fluid | Convenience property for disabling padding | |
shiftRight | Shifts the box to the right of the parent BoxBounds | |
shiftLeft | Shifts the box to the left of the parent BoxBounds | |
shiftUp | Shifts the box to the top of the parent BoxBounds | |
shiftDown | Shifts the box to the bottom of the parent BoxBounds |