Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    Wrap

    This component can be used to display a long list of components, if they get out of the screen the wrap component will make the overflowing ones use a new row.

    Examples

    Simple wrap

    wrap component works like the flex component, but instead of trying to fit children in the available space, it will allow you to set fixed width/height and make it display in multiple rows if it overflows the parent.

    {
        "type": "wrap",
        "spacing": 10,
        "children": [
            {
                "type": "text",
                "value": "Foo",
            },
            // This text will be wrapped, this means that it will show itself right under the "Foo" text instead of out of the screen
            {
                "type": "text",
                "value": "Wrapped",
            }
        ]
    }
    

    Properties

    AttributeDescriptionType
    _typeThe identifier of the component
    • wrap
    childrenThe children of the wrap.array
    alignmentHow the objects in the Wrap should be aligned.string
    • start
    • end
    • center
    • spaceBetween
    • spaceAround
    • spaceEvenly
    crossAxisAlignmentHow the objects in the Wrap should be aligned on the CrossAxis.string
    • start
    • end
    • center
    directionThe direction of the component (horizontal/vertical)string
    • horizontal
    • vertical
    horizontalDirectionIn which direction the elements should be placed following the horizontal axis.string
    • ltr
    • rtl
    runAlignmentHow the objects in the Wrap should be aligned.string
    • start
    • end
    • center
    • spaceBetween
    • spaceAround
    • spaceEvenly
    runSpacingThe spacing between each run of the wrap.number
    spacingThe spacing between each child of the wrap.number
    verticalDirectionHow the objects should be aligned following the vertical axis.string
    • down
    • up