V99Box¶
A container component.
I. Props¶
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Add children for Box |
| fill | boolean | - | Fill the available space according to the main axis |
| flex | number | - | Fill over the available space along your main axis. Space will be divided according to each element's flex property |
| align | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | - | Aligns the flexible container's items when the items do not use all available space on the main-axis |
| backgroundColor | string | - | Set the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis |
| opacity | number | - | Set opacity for Box |
| alignSelf | 'auto' | 'flex-start' 'flex-end' | 'center' | 'stretch' | 'baseline' | - | The align-self property specifies the alignment in the block direction for the selected item inside a flexbox or grid container |
| justify | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | - | Aligns the flexible container's items when the items do not use all available space on the main-axis |
| flexWrap | 'wrap' | 'nowrap' | 'wrap-reverse' | - | Set whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked |
| reverse | boolean | - | Display items in reverse order from normal |
| row | boolean | - | Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container. |
| center | boolean | - | Show children in center |
| paddingBottom | number | - | Set the bottom padding (space) of box. |
| paddingLeft | number | - | Set the left padding (space) of box. |
| paddingRight | number | - | Set the right padding (space) of box. |
| paddingTop | number | - | Set the top padding (space) of box. |
| padding | number | - | Set the padding (space) of box. |
| paddingHorizontal | number | - | Set the left and right padding (space) of box. |
| paddingVertical | number | - | Set the top and bottom padding (space) of box. |
| marginBottom | number | - | Set the bottom margin of box |
| marginLeft | number | - | Set the left margin of box |
| marginRight | number | - | Set the right margin of box |
| marginTop | number | - | Set the top margin of box |
| margin | number | - | Set the margin for all four sides of box |
| marginHorizontal | number | - | Set the left and right margin of box |
| marginVertical | number | - | Set the top and bottom margin of box |
| height | number | string | - | Set height for box |
| width | number | string | - | Set width for box |
| size | number | - | Set size for box including height and width |
| maxHeight | number | string | - | Set maximum height of box |
| maxWidth | number | string | - | Set maximum width of box |
| radius | number | - | Set border radius for four corner of box |
| topLeftRadius | number | - | Set top left border radius of box |
| topRightRadius | number | - | Set top right border radius of box |
| bottomLeftRadius | number | - | Set bottom left border radius of box |
| bottomRightRadius | number | - | Set bottom right border radius of box |
| overflow | 'visible' | 'hidden' | 'scroll' | - | Set the desired behavior for an element's overflow |
| borderTopWidth | number | - | Set the width for top border |
| borderBottomWidth | number | - | Set the width for bottom border |
| borderLeftWidth | number | - | Set the width for left border |
| borderRightWidth | number | - | Set the width for right border |
| borderTopColor | string | - | Set the color for top border |
| borderBottomColor | string | - | Set the color for bottom border |
| borderLeftColor | string | - | Set the color for left border |
| borderRightColor | string | - | Set the color for right border |
| borderColor | string | - | Set the color for 4 borders |
| borderWidth | number | - | Set the width for 4 borders |
| aspectRatio | number | - | Set a aspect ratio for the box |