Wrap is a layout component that adds a defined space between its children.

It wraps its children automatically if there isn't enough space to fit any more in the same row. Think of it as a smarter flex-wrap with spacing support.

  • Example
  • Example
  • Example
  • Example
rc.wrap(
    rc.wrap_item(
        rc.box(
            "Example", bg="lightgreen", w="100px", h="80px"
        )
    ),
    rc.wrap_item(
        rc.box(
            "Example", bg="lightblue", w="200px", h="80px"
        )
    ),
    rc.wrap_item(
        rc.box("Example", bg="red", w="300px", h="80px")
    ),
    rc.wrap_item(
        rc.box("Example", bg="orange", w="400px", h="80px")
    ),
    width="100%",
    spacing="2em",
    align="center",
)

rc.Wrap

Layout component used to add space between elements and wrap automatically if there isn't enough space.

PropType | ValuesDefault
align
str
direction
str
justify
str
should_wrap_children
bool
spacing
str
spacing_x
str
spacing_y
str

Event Triggers

See the full list of default event triggers

rc.WrapItem

Item of the Wrap component.

Props

No component specific props