ProPanelLayout is comprised of three specialised widgets ProPanelLayout, ProCenterPanel and ProOuterPanel, each with their own options and methods. The principle goal of ProPanelLayout is to support as many layout designs and content generators as possible. It achieves this by offering a great deal of flexibility in how it is configured and interacted with. The purpose of the following demos are to show how this flexibility can be used to your advantage.

Initialisation

Creating a layout using named panels

Initialisation of a viewport layout using a single options object with named panel (center, north, south, east and west) options.

Creating a layout using generic panels

Initialisation of a viewport layout using the generic panel option to create multiple panels of varying types.

Creating a layout using modular initialisation

Modular initialisation of a viewport layout using the addPanel() method.

Multiple Panels

Creating a layout with multiple panels of the same type

Initialisation of a viewport layout with multiple outer panels.

Creating a layout with multiple center panels

Initialisation of a viewport layout with multiple center panels.

Nested Layouts

Creating nested layouts using the layout option

Initialisation of a viewport layout with nested layouts initialised using the layout option.

Creating nested layouts using the addLayout method

Modular initialisation of a viewport layout with nested layouts using the addLayout() method.

Specialised Widgets

ProPanelLayout Overview

The ProPanelLayout widget is the layout container and controls the layout of the center and outer panels.

ProCenterPanel Overview

The ProCenterPanel widget is responsible for center panels

ProOuterPanel Overview

The ProOuterPanel widget is responsible for north, south, east and west panels and exposes a rich API for interacting with these panels.

Features

Responsive Layout

ProPanelLayout will adapt any layout configuration to the available space by automatically managing outer panel size and state.