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

    This component is used to make its children overlap. This is particularly interesting when building complex views that needs to put some content above an image or for styling some views. The first child in the list will be in the background while the last child of the list will be in the foreground of the stack.

    Examples

    Stacking containers

    This example will show two boxes, a red one at the background and a green one in the foreground. Both are respectively sized 100x100 and 60x60 so that they can be seen.

    {
        "type": "stack",
        "children": [
            {
            "type": "container",
            "decoration": {"color": 0xFFFF0000},
            "constraints": {
                "minWidth": 100,
                "maxWidth": 100,
                "minHeight": 100,
                "maxHeight": 100,
            },
            "child": {"type": "text", "value": "This is in the background"}
            },
            {
            "type": "container",
            "decoration": {"color": 0xFF00FF00},
            "constraints": {
                "minWidth": 60,
                "maxWidth": 60,
                "minHeight": 60,
                "maxHeight": 60,
            },
            "child": {"type": "text", "value": "This is in the foreground."}
            },
        ]
    }
    

    Properties

    AttributeDescriptionType
    typeThe identifier of the component
    • stack
    childrenThe children of the Stack.array
    alignmentThe alignment to use.string
    • center
    • bottomCenter
    • bottomLeft
    • bottomRight
    • centerLeft
    • centerRight
    • topCenter
    • topLeft
    • topRight
    fitThe StackFit enum.string
    • passthrough
    • expand
    • loose