Page Layout

In Lowcoder, the Page Layout component serves as a foundational container designed to structure and organize the main sections of an application interface, including the header, sidebar (sider), footer, and main content areas. This component facilitates the creation of consistent and responsive layouts, ensuring a cohesive user experience across different devices.

Key Features:

1. Structured Layout: The Page Layout component provides predefined regions—header, sider, footer, and content—that can be customised and populated with various UI elements to establish a clear and organised interface.

2. Responsiveness: Designed to adapt to different screen sizes, the Page Layout ensures that applications are accessible and functional across desktops, tablets, and mobile devices.

3. Customisation: Each section within the Page Layout can be styled individually, allowing developers to align the appearance with the application's design guidelines.

4. Integration: The Page Layout seamlessly integrates with other Lowcoder components, enabling the embedding of forms, tables, charts, and other elements within its structured regions.

Component Playground

On Component Playground, you can interact with the Page Layout component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Page Layout component.

Lowcoder | rapid App & VideoMeeting builder for everyone.app.lowcoder.cloud

Component Auto-Docs

In the Auto-Docs of the Page Layout component, we have shown how to use different properties of this component. It also includes the Styling properties of the component.

Lowcoder | rapid App & VideoMeeting builder for everyone.app.lowcoder.cloud

Properties of the Page Layout component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
hidden	Boolean	Returns True or False based on whether the Page Layout component is hidden or not
container	Object	Returns the Container object, which contains all the components placed inside the Container
disabled	Boolean	Returns True or False based on whether the Page Layout component is disabled or not
siderCollapsed	Boolean	Returns True or False based on whether the Page Layout sider is collapsed or not

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setSiderCollapsed() :

pageLayout1.setSiderCollapsed() method sets the siderCollapsed property of the Page Layout component. It takes True or False as an Argument. Following code collapses the Sider component on Page Layout.

pageLayout1.setSiderCollapsed(true);