Panel Layout Properties


Panel Layouts are containers that can contain Panels, Panel Navigators, and even other Panel Layout containers. The Panel Layout Properties section allows you to define how the sub-containers inside a panel layout will act. For example, the direction that the containers will flow in, what method of animation will be used to display panels, what buttons reveal hidden panels, and more.




Sets the sub-theme for a Panel Layout control.

Display name

(Optional) Specify an optional display name to be used instead of the id when the panel name is displayed in header or footer text.

Panel classname

Set the class name for the Panel.

Panel body classname

Set the class name for the Panel body section.

Panel body inline-style

Set the in-line style for the Panel body section.

Layout flow direction

Specify the flow direction. Options are LTR (left-to-right), TTB (top-to-bottom), RTL (right-to-left), and BTT (bottom-to-top).

Docked panel display method

Specify how docked panels should be displayed when they are invoked. 'Over' displays the Panel on top of the existing Panel Layout. 'Slide' will shift the existing Panels to the right so that there is room to show the Panel being shown. 'Push' will push the existing Panels to the left, right, top or bottom, depending on the flow direction.

Dock lock flow

If checked, when a currently hidden (i.e. docked) Panel is shown, the existing Panels are 'locked' so that the user cannot interact with them. It makes the Panel that it shows modal. Clicking on a locked area will dismiss the Panel that was shown.

Dock lock class name

Optional, specifies a class name for the overlay that appears over locked Panels when a Dock Panel is shown.

Docked Panel controller buttons

Optional. You can specify the ids of buttons that will show/hide any of the Panels in this Panel Layout that have been docked (i.e. hidden). To be useful this property requires a docked panel and another panel card with a button inside it.


Specify the animation method for Card transitions. For example, when a docked Panel is either shown or hidden.

Animation duration

Specify the duration of the transition (in milliseconds).