Visão geral

TsgcHTMLDashboardLayout

Um componente de layout que emite um shell completo de dashboard: uma sidebar fixa à esquerda e uma área principal com preenchimento construída a partir de seções com título. Configure a Sidebar, adicione seções e então leia a propriedade HTML.

Classe do componente

TsgcHTMLDashboardLayout

Renderiza

Shell de dashboard (sidebar fixa + conteúdo)

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, construa o shell, renderize

Configure a Sidebar somente leitura, chame AddSection(title, content) para cada bloco e então leia HTML (ou insira-o em uma 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Sidebar é uma TsgcHTMLComponent_Sidebar somente leitura renderizada fixa à esquerda; configure seu Brand, Width e Items no lugar.

Seções

AddSection(aTitle, aContent, aID) adiciona um <section> com título; AddRawContent(aContent) insere markup intocado; ClearContent esvazia a área principal.

Shell

Fluid alterna o contêiner de largura total, FooterText adiciona um rodapé centralizado e LayoutID define o id do elemento wrapper.

Modo escuro

DarkMode injeta uma folha de estilos de tema escuro que recolore cards, tabelas, formulários, nav e grupos de lista dentro do shell.

Espaçamento & destaques

MainPadding, MainMinHeight e SectionMarginBottom dimensionam a área principal; SectionTitleBorderColorStyle (um TsgcHTMLColor) tinge o sublinhado do título de cada seção.

Saída

HTML retorna o shell completo — sidebar fixa, conteúdo principal e rodapé — pronto para servir, ou atribua-o ao BodyContent de um template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

DashboardLayout