Componente DashboardLayout — sgcHTML

De un vistazo

TsgcHTMLDashboardLayout

Un componente de disposición que emite un panel completo: una barra lateral fija a la izquierda y un área principal con margen construida a partir de secciones con título. Configura el Sidebar, añade secciones y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLDashboardLayout

Genera

Panel (barra lateral fija + contenido)

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, construye el panel y genéralo

Configura el Sidebar de solo lectura, llama a AddSection(title, content) por cada bloque y luego lee HTML (o colócalo en una página 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Sidebar es un TsgcHTMLComponent_Sidebar de solo lectura que se genera fijo a la izquierda; configura su Brand, Width e Items directamente.

Secciones

AddSection(aTitle, aContent, aID) añade una <section> con título; AddRawContent(aContent) inserta marcado sin modificar; ClearContent vacía el área principal.

Panel

Fluid alterna el contenedor de ancho completo, FooterText añade un pie de página centrado y LayoutID establece el id del elemento contenedor.

Modo oscuro

DarkMode inyecta una hoja de estilos de tema oscuro que recolorea tarjetas, tablas, formularios, navegación y grupos de lista dentro del panel.

Espaciado y acentos

MainPadding, MainMinHeight y SectionMarginBottom dimensionan el área principal; SectionTitleBorderColorStyle (un TsgcHTMLColor) tiñe el subrayado del título de cada sección.

Salida

HTML devuelve el panel completo — barra lateral fija, contenido principal y pie de página — listo para servir, o asígnalo a la propiedad BodyContent de una plantilla de página.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

DashboardLayout