1.2.0 • Published 2 years ago
@piksl/box v1.2.0
@piksl/box
<Box />is a Styled Component that wraps the<div>HTML-element and provides properties to change the styling of the element. More information about the available properties can be found in the API description below.
API
Box
| Prop | Description | Type | Default |
|---|---|---|---|
| display | Minimum height of the <Container /> | inline, block, flex | - |
| justify | Sets the distribution of space between and around <Box /> children items. | flex-start, flex-end, center, space-between, space-around, space-evenly | - |
| align | Sets the destribution of space between and around <Box /> children items. | flex-start, flex-end, center | - |
| wrap | Defines whether the flex items are inside <Box /> are forced in a single line or can be flowed into multiple lines. | nowrap, wrap, wrap-reverse | nowrap |
| position | Sets how the <Box /> is positioned | static, relative, fixed, absolute, sticky | - |
| margin | Sets the margin area on sides of the <Box /> | OffsetShorthandType | - |
| padding | Sets the padding area on sides of the <Box /> | OffsetShorthandType | - |
| top | Determine the top location of positioned <Box /> | string | - |
| right | Determine the right location of positioned <Box /> | string | - |
| bottom | Determine the bottom location of positioned <Box /> | string | - |
| left | Determine the left location of positioned <Box /> | string | - |
| classname | The classname of the <Box /> | string | - |
Types
OffsetType
number | "auto"
OffsetShorthandType
[OffsetType, OffsetType, OffsetType, OffsetType] |
[OffsetType, OffsetType, OffsetType] |
[OffsetType, OffsetType] |
[OffsetType]