Distribute component is deprecated, use Arrange component instead. Arrange component has the same features as Distribute and more.
Usage
import { Distribute } from '@loomhq/lens'
<Distribute>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</Distribute>
Gap
Use gap
prop to add space between children.
See also Responsive props
Semantic spacing value
name | unit | rem | px |
---|---|---|---|
xsmall | 0.5 | 0.25rem | 4px |
small | 1 | 0.5rem | 8px |
medium | 2 | 1rem | 16px |
large | 3 | 1.5rem | 24px |
xlarge | 5 | 2.5rem | 40px |
xxlarge | 8 | 4rem | 64px |
<Distribute gap="medium">
<div>Content</div>
<div>Content</div>
</Distribute>
Number value
The number value will be mutiplied by 8
.
For example, if we pass 3
it will result in 24px
(3*8
).
The result is converted to REMs
, so the final value is 1.5rem
(24/16
).
<Distribute gap={4}>
<div>Content</div>
<div>Content</div>
</Distribute>
String value
Any valid CSS measurement value, for example, auto
, 50%
, or 10vw
.
<Distribute gap="1px">
<div>Content</div>
<div>Content</div>
</Distribute>
Alignment
Use alignment prop to align children in relation to each other.
Direction
Use direction prop to line-up children vertically or horizontally.
Spread
Use isSpread
prop to push children far apart from each other.
Semantic HTML
Use htmlTag
prop to render a more suited element tag. Only default to div
if no other element works better. More about Html5 Semantic Elements.