Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.

Usage

Import

import { Wrap, WrapItem } from '@passfort/castle'
content_copy
Copy

• Wrap: Wrap composes the Box component and renders a <ul> tag
• WrapItem: WrapItem composes the Box component and renders the HTML <li> tag

Example

Think of Wrap component as a flex box container with flex-wrap and spacing support. It works really well with things like dialog buttons, tags, and chips.

In the example below, you see that the last Box wrapped to the next line..

<Wrap>
  <WrapItem>
    <Center w="180px" h="80px" bg="R0">
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="G0">
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="N25">
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="B0">
      Box 4
    </Center>
  </WrapItem>
</Wrap>
<Wrap>
  <WrapItem>
    <Center w="180px" h="80px" bg="R0">
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="G0">
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="N25">
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="B0">
      Box 4
    </Center>
  </WrapItem>
</Wrap>
content_copy
Copy
live example

Change the spacing

Pass the spacing prop to apply consistent spacing between each child, even if it wraps.

<Wrap spacing="30px">
  <WrapItem>
    <Center w="180px" h="80px" bg="R0">
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="G0">
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="N25">
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="B0">
      Box 4
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="N25">
      Box 5
    </Center>
  </WrapItem>
</Wrap>
<Wrap spacing="30px">
  <WrapItem>
    <Center w="180px" h="80px" bg="R0">
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="G0">
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="N25">
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="B0">
      Box 4
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w="180px" h="80px" bg="N25">
      Box 5
    </Center>
  </WrapItem>
</Wrap>
content_copy
Copy
live example