TMultiContainer

A responsive multi-region container component with header, footer, left/right slide panels, and central content area. Fully responsive with automatic mobile adaptation.

Container Responsive TMS Web Core

Overview

TMultiContainer provides a complete page layout solution with five distinct regions: Header, Footer, Left Panel, Right Panel, and Central Content. It automatically adapts to different screen sizes and can merge footer actions into a mobile menu.

+-------------------------------------------------+ | HEADER | ← TSlideContainer (hideable) +-------------------------------------------------+ | | | | | LEFT | CENTRAL CONTENT | RIGHT | ← All slide containers | PANEL | (MAIN) | PANEL | | | | | +-------------------------------------------------+ | FOOTER | ← TCoreDiv (stuck to bottom) +-------------------------------------------------+

Unit & Inheritance

UNIT Obj.Container.Multi;

TMultiContainer = CLASS(TCoreDiv)
   // Inherits from TCoreDiv for CSS class support and ElementHandle access

Design-Time Behaviour

At design time, all five sub-components are created as real components with color-coding for easy identification:

These colors are removed at runtime, leaving transparent backgrounds that inherit from parent styling or themes.

Drag Handle: A small drag handle appears at the top-left corner at design time, allowing you to drag the entire TMultiContainer even when sub-components cover the surface.

Published Properties

Property Type Default Description
HeaderContent TSubSlideContainer Auto-created The header region. Supports slide-down animation.
FooterContent TSubCoreDiv Auto-created The footer region. Fixed to bottom of container.
LeftContent TSubSlideContainer Auto-created Left slide panel. Slides in from left edge.
RightContent TSubSlideContainer Auto-created Right slide panel. Slides in from right edge.
CentralContent TSubCoreDiv Auto-created Main content area. Fills remaining space.
HeaderHeight Integer 50 Height of the header region in pixels.
FooterHeight Integer 60 Height of the footer region in pixels.
LeftPanelWidth Integer 280 Width of the left slide panel when open.
RightPanelWidth Integer 280 Width of the right slide panel when open.
MainMenu TWebMainMenu nil Reference to main menu for mobile menu merging.
HideFooterOnMobile Boolean True When True, footer is hidden on mobile and actions merge to MainMenu.
Debug Boolean False When True, shows design-time colors at runtime for debugging.

Public Properties

Property Type Description
CurrentMode TDeviceMode Current device mode: dmDesktop, dmTablet, or dmMobile.
Dom TDom Internal TDom instance for viewport tracking and CSS manipulation.

Public Methods

Slide Panel Control

PROCEDURE OpenRightContainer;

Opens the right slide panel with animation.

PROCEDURE CloseRightContainer;

Closes the right slide panel with animation.

FUNCTION ToggleRightContainer: Boolean;

Toggles the right panel open/closed. Returns True if panel is now open.

PROCEDURE OpenLeftContainer;

Opens the left slide panel with animation.

PROCEDURE CloseLeftContainer;

Closes the left slide panel with animation.

FUNCTION ToggleLeftContainer: Boolean;

Toggles the left panel open/closed. Returns True if panel is now open.

PROCEDURE OpenHeaderContainer;

Opens/shows the header with slide-down animation.

PROCEDURE CloseHeaderContainer;

Closes/hides the header with slide-up animation.

PROCEDURE ToggleHeaderContainer;

Toggles the header visibility.

Footer Visibility

PROCEDURE HideFooter;

Hides the footer and expands the central content to fill the space. Updates the central content's bottom offset to 0.

PROCEDURE ShowFooter;

Shows the footer and adjusts the central content accordingly. Restores the central content's bottom offset to accommodate the footer height.

Mobile Menu Merging

PROCEDURE AddMergeMenuItem(CONST Key: STRING; CONST Caption: STRING; OnClick: TNotifyEvent; CONST ImageURL: STRING = '');

Adds an item to be merged into the MainMenu when in mobile mode. The Key is used to identify items for removal.

PROCEDURE RemoveMergeMenuItem(CONST Key: STRING);

Removes a previously added merge menu item by its key.

PROCEDURE ClearMergeMenuItems;

Removes all merge menu items.

Responsive Behaviour

TMultiContainer uses TDom for viewport tracking and automatically adapts its layout:

Desktop/Tablet Mode

Mobile Mode

Usage Examples

Basic Setup

// Drop TMultiContainer on form - sub-components are auto-created
// Access regions directly:

MultiContainer1.HeaderContent   // Header region
MultiContainer1.FooterContent   // Footer region  
MultiContainer1.CentralContent  // Main content area
MultiContainer1.LeftContent     // Left slide panel
MultiContainer1.RightContent    // Right slide panel

Opening Side Panels

PROCEDURE TMainForm.btnMenuClick(Sender: TObject);
BEGIN
   MultiContainer1.ToggleLeftContainer;
END;

PROCEDURE TMainForm.btnSettingsClick(Sender: TObject);
BEGIN
   MultiContainer1.OpenRightContainer;
END;

Mobile Menu Integration

PROCEDURE TMainForm.FormCreate(Sender: TObject);
BEGIN
   // Link to main menu for mobile merging
   MultiContainer1.MainMenu := WebMainMenu1;
   
   // Add footer actions that will appear in mobile menu
   MultiContainer1.AddMergeMenuItem('home', 'Home', @HomeClick);
   MultiContainer1.AddMergeMenuItem('settings', 'Settings', @SettingsClick);
   MultiContainer1.AddMergeMenuItem('profile', 'Profile', @ProfileClick);
END;

Programmatic Footer Control

PROCEDURE TMainForm.EnterFullscreen;
BEGIN
   MultiContainer1.HideFooter;
   MultiContainer1.CloseHeaderContainer;
END;

PROCEDURE TMainForm.ExitFullscreen;
BEGIN
   MultiContainer1.ShowFooter;
   MultiContainer1.OpenHeaderContainer;
END;

CSS Classes

TMultiContainer applies the CSS class dashboard-multi-container to itself. Sub-components can be styled via their ElementClassName property or by targeting their auto-generated names.

Important: All CSS styling is applied inline via TDom at runtime. There is NO external CSS file dependency. This ensures the component works standalone without requiring CSS imports.

Sub-Component Types

The sub-components use special "Sub" variants that hide published properties in the Object Inspector to reduce clutter:

See Also