Layers
Last updated
Was this helpful?
Last updated
Was this helpful?
Lowcoder offers the fantastic feature of enabling a mode where components can freely overlap on the canvas, combined with precise control over the layering of these components. This advanced functionality diverges from traditional grid-based placement constraints, offering developers and designers unparalleled UI/UX creation flexibility.
The control over component layering empowers you to build interfaces that are not only highly functional but also aesthetically pleasing. Layers are an essential step towards the Vision of Lowcoder to merge the ability to create "Apps, Websites, Presentations, and Collaboration Tools" inside a single Lowcode Platform.
From Version 2.3.1 on we introduce this feature in several steps and develop it further by the feedback of the Lowcoder Community.
In the App Editor, we introduce a setting to switch on the "Layer Feature" within the App Editor. Each App that is edited during this feature is switched on will become capable of organizing components in layers. Existing Apps will look exactly the same till you start to place components differently. However, by the nature of "Layers", the positioning of components is "fixed" in a vertical & horizontal manner.
That means that you need to plan the layout differently, as the automatic "pushing down" of visual components with "auto-height" will not be effective in the Layers Mode. Each component is defined at the same time as a single layer. In other words, the app has as many layers as you place Components to the Canvas.
In Version 2.4.x we will activate Layer Groups to help you to organize components in a layer group together. A layer group will behave like a single Layer.
Deep Layers are the possibility to organize Layer Positions for Components inside of Containers & Lists. (Child Components). The Layer & Selection List shows already the full Hierarchy, but limits in Step 1 the possibility to the root-level of Components.
When we activate Step 3, you will be able to control the vertical auto-scaling of components in connection to the current layer group and other elements on the Canvas.
In the new "Layers" Settings Menu on the left Sidebar you can open the Settings regarding Layers, Bulk edit, and Layout.
To change the Layer Position and move Components in front or back of each other, simply use the drag n drop List on the left Layers Settings section.