Layout component is deprecated, use Split component instead. Split component has the same features as Layout and more.
Grains are seeded randomly, periodically, or whenever the module receives a trigger.
The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.
Grains are seeded randomly, periodically, or whenever the module receives a trigger.
Usage
import { Layout } from '@loomhq/lens'
<Layout>
<Layout.Section>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>
Alignment
Use alignment
prop to align children in relation to each other.
Gap and dimensions
Use gap
prop on <Layout />
to create space between Layout.Section
s.
Use width
and maxWidth
props on <Layout.Section />
to specify dimensions.
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 |
<Layout gap="medium">
<Layout.Section width="xlarge">Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>
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
).
<Layout gap={4}>
<Layout.Section width={20}>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>
String value
Any valid CSS measurement value, for example, auto
, 50%
, or 10vw
.
<Layout gap="1px">
<Layout.Section width="50%">Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>
Props
Layout
name
type
default
children
React.ReactNode
Layout.Section
name
type
default
children
React.ReactNode