In één oogopslag

TsgcHTMLDashboardLayout

Een layoutcomponent dat een complete dashboard-shell uitstuurt: een vaste sidebar links en een hoofdgebied met opvulling, opgebouwd uit getitelde secties. Configureer de Sidebar, voeg secties toe en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLDashboardLayout

Rendert

Dashboard-shell (vaste sidebar + inhoud)

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, bouw de shell, render hem

Configureer de alleen-lezen Sidebar, roep AddSection(title, content) aan voor elk blok en lees dan HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).

uses
  sgcHTML_Enums, sgcHTML_Component_DashboardLayout;

var
  oDash: TsgcHTMLDashboardLayout;
begin
  oDash := TsgcHTMLDashboardLayout.Create(nil);
  try
    oDash.DarkMode := True;
    oDash.FooterText := '© 2026 Acme Inc.';

    oDash.Sidebar.Brand := 'Acme Admin';
    oDash.Sidebar.Items.Add.Text := 'Overview';
    oDash.Sidebar.Items.Add.Text := 'Reports';

    oDash.AddSection('Sales', '<p>Revenue is up 12%</p>');
    oDash.AddSection('Activity', '<p>3 new orders</p>');

    WebModule.Response := oDash.HTML;   // dashboard shell
  finally
    oDash.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_DashboardLayout.hpp

TsgcHTMLDashboardLayout *oDash = new TsgcHTMLDashboardLayout(NULL);
try
{
  oDash->DarkMode = true;
  oDash->FooterText = "© 2026 Acme Inc.";

  oDash->Sidebar->Brand = "Acme Admin";
  oDash->Sidebar->Items->Add()->Text = "Overview";
  oDash->Sidebar->Items->Add()->Text = "Reports";

  oDash->AddSection("Sales", "<p>Revenue is up 12%</p>");
  oDash->AddSection("Activity", "<p>3 new orders</p>");

  String html = oDash->HTML;   // dashboard shell
}
__finally
{
  delete oDash;
}

using esegece.sgcWebSockets;

var dash = new TsgcHTMLDashboardLayout();
dash.DarkMode = true;
dash.FooterText = "© 2026 Acme Inc.";

dash.Sidebar.Brand = "Acme Admin";
dash.Sidebar.Items.Add().Text = "Overview";
dash.Sidebar.Items.Add().Text = "Reports";

dash.AddSection("Sales", "<p>Revenue is up 12%</p>");
dash.AddSection("Activity", "<p>3 new orders</p>");

string html = dash.HTML;   // dashboard shell

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Sidebar is een alleen-lezen TsgcHTMLComponent_Sidebar die links vast wordt gerenderd; configureer zijn Brand, Width en Items ter plaatse.

Secties

AddSection(aTitle, aContent, aID) voegt een getitelde <section> toe; AddRawContent(aContent) plaatst markup ongewijzigd; ClearContent leegt het hoofdgebied.

Shell

Fluid schakelt de full-width container in of uit, FooterText voegt een gecentreerde voettekst toe en LayoutID stelt de element-id van de wrapper in.

Donkere modus

DarkMode injecteert een donker-thema-stylesheet die kaarten, tabellen, formulieren, nav en lijstgroepen binnen de shell herkleurt.

Spatiëring en accenten

MainPadding, MainMinHeight en SectionMarginBottom bepalen de afmetingen van het hoofdgebied; SectionTitleBorderColorStyle (een TsgcHTMLColor) kleurt de onderstreping van elke sectietitel.

Uitvoer

HTML retourneert de volledige shell — vaste sidebar, hoofdinhoud en voettekst — klaar om te serveren, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

DashboardLayout