Sha256: e7133f04f51d3b38a977460e10a83bf3e93b3df5aed265cef743a86df9b10fd9
Contents?: true
Size: 1.37 KB
Versions: 948
Compression:
Stored size: 1.37 KB
Contents
import React from 'react'
import { Flex, FlexItem } from 'playbook-ui'
const FlexGap = (props) => {
const count = () => {
const array = []
for (let i = 0; i < 40; i++) {
array.push(i)
}
return array
}
return (
<>
<div className="flex-doc-example">
<Flex
gap="xxs"
wrap
{...props}
>
{count().map((v, key) => (
<FlexItem key={key}>
{v}
</FlexItem>
))}
</Flex>
</div>
<br />
<div className="flex-doc-example">
<Flex
columnGap="lg"
{...props}
>
<FlexItem>
{'1'}
</FlexItem>
<FlexItem>
{'2'}
</FlexItem>
<FlexItem>
{'3'}
</FlexItem>
<FlexItem>
{'4'}
</FlexItem>
</Flex>
</div>
<br />
<div className="flex-doc-example">
<Flex
orientation="column"
rowGap="xl"
{...props}
>
<FlexItem>
{'1'}
</FlexItem>
<FlexItem>
{'2'}
</FlexItem>
<FlexItem>
{'3'}
</FlexItem>
<FlexItem>
{'4'}
</FlexItem>
</Flex>
</div>
</>
)
}
export default FlexGap
Version data entries
948 entries across 948 versions & 2 rubygems