En bref

TsgcHTMLDashboardLayout

Un composant de mise en page qui émet une coque complète de tableau de bord : une barre latérale fixe à gauche et une zone principale espacée construite à partir de sections titrées. Configurez la Sidebar, ajoutez des sections, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLDashboardLayout

Produit

Coque de tableau de bord (barre latérale fixe + contenu)

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, construisez la coque, affichez-le

Configurez la Sidebar en lecture seule, appelez AddSection(title, content) pour chaque bloc, puis lisez HTML (ou intégrez-le dans une page TsgcHTMLTemplate_Bootstrap).

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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Sidebar est une TsgcHTMLComponent_Sidebar en lecture seule rendue fixe à gauche ; configurez son Brand, sa Width et ses Items sur place.

Sections

AddSection(aTitle, aContent, aID) ajoute une <section> titrée ; AddRawContent(aContent) insère du balisage tel quel ; ClearContent vide la zone principale.

Coque

Fluid active le conteneur pleine largeur, FooterText ajoute un pied de page centré, et LayoutID définit l'identifiant de l'élément conteneur.

Mode sombre

DarkMode injecte une feuille de style de thème sombre qui recolore les cartes, tableaux, formulaires, navigation et groupes de listes à l'intérieur de la coque.

Espacement & accents

MainPadding, MainMinHeight et SectionMarginBottom dimensionnent la zone principale ; SectionTitleBorderColorStyle (un TsgcHTMLColor) teinte le soulignement du titre de chaque section.

Sortie

HTML renvoie la coque complète — barre latérale fixe, contenu principal et pied de page — prête à servir, ou affectez-la au BodyContent d'un modèle de page.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

DashboardLayout