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.
Event Triggers
See the full list of default event triggersrc.WrapItem
Item of the Wrap component.
Props
No component specific props