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

    OverlayEntry

    This component is used to create an overlay that shows itself over the current application's UI. For example, it might be interesting to use it when displaying errors in a snackbar.

    Examples

    Simple overlayEntry

    This component uses the showOverlay boolean property to know whether it should be shown to the screen or not. This property should be used to open/close the overlayEntry. The overlayEntry should not be directly removed from the JSON tree as it will not follow the right disposing process, the overlayEntry will end up stuck on the screen with no way to remove it.

    {
        "type": "overlayEntry",
        "showOverlay": true,
        "child": {
            "type": "text",
            "value": "This text is shown inside of an overlayEntry."
        }
    }
    

    Recommended : Overlays in root component

    It is recommended to put overlays inside the root flex component of the application because it will be easier to handle the lifecycle of these overlays. Behind the scenes, the overlays are put at the top of the UI tree anyway. An example is shown below.

    {
        "type": "flex",
        "children": [
            {
                "type": "text",
                "value": "This is the main UI of the app",
            },
            // Add overlays in root flex component.
            {
                "type": "overlayEntry",
                "showOverlay": true,
                "child": {
                    "type": "text",
                    "value": "This text is shown inside of an overlayEntry."
                }
            }
        ]
    }
    

    Properties

    AttributeDescriptionType
    _typeThe identifier of the component
    • overlayEntry
    childAny componentComponent
    maintainStateWhether this entry must be included in the tree even if there is a fully opaque entry above it.boolean
    opaqueWhether this entry occludes the entire overlay.boolean
    showOverlayWhether this entry should be shown.boolean