Usage
import { Split, SplitSection } from '@loomhq/lens'
<Split>
<SplitSection>Content</SplitSection>
<SplitSection>Content</SplitSection>
</Split>
Based on CSS flexbox
Split component is built with CSS flexbox. Learn more about CSS flexbox A Complete Guide to Flexbox.
Gap
<DemoBox boxType="outline">
<Split gap="medium">
<SplitSection>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
Align and justify
Use alignItems
, alignContent
, and justifyContent
in the same way you would use CSS flexbox.
<>
<DemoBox boxType="outline">
<Split alignItems="flex-end" height={15}>
<SplitSection>
<DemoBox padding="medium">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="xsmall">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
<br />
<DemoBox boxType="outline">
<Split alignContent="flex-end" height={15}>
<SplitSection>
<DemoBox padding="medium">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="xsmall">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
<br />
<DemoBox boxType="outline">
<Split justifyContent="space-between">
<SplitSection>
<DemoBox padding="medium">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="xsmall">Content</DemoBox>
</SplitSection>
<SplitSection>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
</>
Grow shrink and basis
Use grow
, shrink
, and basis
in the same way you would use CSS flexbox.
<>
<DemoBox boxType="outline">
<Split>
<SplitSection grow={1} shrink={0} basis={20}>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
<SplitSection grow={1} shrink={1} basis={10}>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
<br />
<DemoBox boxType="outline">
<Split>
<SplitSection grow={1}>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
<SplitSection grow={11}>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
</>
Wrap
Resize to wrap
<>
Will wrap
<DemoBox boxType="outline">
<Split>
<SplitSection grow={1} basis={30}>
<DemoBox padding="small">{demoText.medium}</DemoBox>
</SplitSection>
<SplitSection grow={1} basis={30}>
<DemoBox padding="small">{demoText.medium}</DemoBox>
</SplitSection>
</Split>
</DemoBox>
<br />
No not wrap
<DemoBox boxType="outline">
<Split wrap="nowrap">
<SplitSection grow={1} basis={30}>
<DemoBox padding="small">{demoText.medium}</DemoBox>
</SplitSection>
<SplitSection grow={1} basis={30}>
<DemoBox padding="small">{demoText.medium}</DemoBox>
</SplitSection>
</Split>
</DemoBox>
</>
Responsive props
See available responsive props
For responsive props pass an object where the key is the min-width
breakpoint.
prop={{
default: 'xsmall',
xsmall: 'xsmall',
small: 'xsmall',
medium: 'large',
large: 'xlarge',
}}
Custom breakpoint
prop={{
'12em': 'xsmall',
'28em': 'large',
}}
Available breakpoints
breakpoint | min width |
---|
xsmall | 31em (496px) |
small | 48em (768px) |
medium | 64em (1024px) |
large | 75em (1200px) |
Responsive examples
Resize the browser to see the effect.
<DemoBox boxType="outline">
<Split
gap={{
'default': 'xsmall',
'xsmall': 'small',
'small': 'medium',
'medium': 'large',
'large': 'large'
}}
>
<SplitSection>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
<SplitSection
grow={{
'default': '0',
'medium': '1',
}}
>
<DemoBox padding="small">Content</DemoBox>
</SplitSection>
</Split>
</DemoBox>
More examples
See Layout recipes.
Props
Split
gap
ResponsiveType
<number | string>
'initial'
alignItems
ResponsiveType
<
'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'
>
'center'
wrap
ResponsiveType
<'nowrap' | 'wrap' | 'wrap-reverse'>
'wrap'
width
ResponsiveType
<number | string>
height
ResponsiveType
<number | string>
minWidth
ResponsiveType
<number | string>
minHeight
ResponsiveType
<number | string>
maxWidth
ResponsiveType
<number | string>
maxHeight
ResponsiveType
<number | string>
justifyContent
ResponsiveType
<
| 'flex-start'
| 'flex-end'
| 'center'
| 'space-between'
| 'space-around'
| 'space-evenly'
>
alignContent
'flex-start'
| 'flex-end'
| 'center'
| 'space-between'
| 'space-around'
| 'space-evenly'
| 'stretch'
| 'start'
| 'end'
| 'baseline'
direction
ResponsiveType
<'column' | 'row'>
SplitSection
width
ResponsiveType
<number | string>
height
ResponsiveType
<number | string>
minWidth
ResponsiveType
<number | string>
minHeight
ResponsiveType
<number | string>
maxWidth
ResponsiveType
<number | string>
maxHeight
ResponsiveType
<number | string>
grow
ResponsiveType
<number | string>
shrink
ResponsiveType
<number | string>
basis
ResponsiveType
<number | string>