Wrap

Register on Lenra

Element of type Wrap

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

{
    "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 componentstring ("wrap")
childrenThe children of the wrap.component[]
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")