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.
Responsive props
Use an array with a maximum of 4 values that will be paired with the 4 breakpoints. The array items use the same type of values as their corresponding non-responsive values.
breakpoint | min width |
---|---|
xsmall | 31em (496px) |
small | 48em (768px) |
medium | 64em (1024px) |
large | 75em (1200px) |
Gap
<Distribute gap={['xsmall','small','medium','large']}><div>Content</div><div>Content</div></Distribute>
Alignment
<Distribute alignment={['start', 'center', 'end', 'center']}><div>Content</div><div>Content</div></Distribute>
Direction
<Distribute direction={['column', 'row', 'column', 'row']}><div>Content</div><div>Content</div></Distribute>
Spread
<Distribute isSpread={[true, false, true, false]}><div>Content</div><div>Content</div></Distribute>
Responsive demo
Resize the browser