Wrap
Used to add space between elements and wraps automatically if there isn't enough space.
0
1
2
3
4
5
6
7
8
9
import { Center, Wrap } from '@fidely-ui/react'
export const WrapBasic = () => {
return (
<Wrap>
{Array.from({ length: 10 }).map((_, index) => (
<Center key={index} bg="orange.9" boxSize="100px" color="black.alpha11">
{index}
</Center>
))}
</Wrap>
)
}
Usage
import { Wrap } from '@fidely-ui/react'<Wrap>
<div />
<div />
<div />
<div />
</Wrap>Examples
Gap
0
1
2
3
4
5
6
7
8
9
import { Center, Wrap } from '@fidely-ui/react'
export const WrapGap = () => {
return (
<Wrap gap={5}>
{Array.from({ length: 10 }).map((_, index) => (
<Center key={index} bg="orange.9" boxSize="100px" color="black.alpha11">
{index}
</Center>
))}
</Wrap>
)
}
Alignment
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
import { Center, Wrap } from '@fidely-ui/react'
export const WrapAlign = () => {
return (
<Wrap gap="30px" align="center">
{Array.from({ length: 7 }).map((_, index) => (
<Center w="180px" h="80px" bg="bg.emphasized" key={index}>
Box {index + 1}
</Center>
))}
</Wrap>
)
}
Justifyy
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
import { Center, Wrap } from '@fidely-ui/react'
export const WrapJustify = () => {
return (
<Wrap gap="30px" justify={'center'}>
{Array.from({ length: 7 }).map((_, index) => (
<Center w="180px" h="80px" bg="bg.subtle" key={index}>
Box {index + 1}
</Center>
))}
</Wrap>
)
}
Row and Column Gap
import { Box, Wrap } from '@fidely-ui/react'
export const WrapRowGap = () => {
return (
<Wrap rowGap={['0px', '24px']} columnGap={['4px', '12px']}>
{Array.from({ length: 10 }).map((_, index) => (
<Box key={index} w="12" h="12" bg={'bg.muted'} />
))}
</Wrap>
)
}