DashboardLayout 组件 — sgcHTML

概览

TsgcHTMLDashboardLayout

一个布局组件，发出完整的仪表板外壳：左侧的固定侧边栏和由带标题区块构建的带内边距主区域。配置 Sidebar，添加内容区，然后读取 HTML 属性。

组件类

TsgcHTMLDashboardLayout

渲染为

仪表板外壳（固定侧边栏 + 内容）

家族

导航与结构

语言

Delphi, C++ Builder, .NET

快速入门

创建它、构建外壳、渲染它

配置只读的 Sidebar，为每个区块调用 AddSection(title, content)，然后读取 HTML（或将其放入 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

参考

关键属性与方法

您最常使用的成员。

侧边栏

Sidebar 是一个只读的 TsgcHTMLComponent_Sidebar，固定渲染在左侧；就地配置其 Brand、Width 和 Items。

内容区

AddSection(aTitle, aContent, aID) 追加一个带标题的 <section>；AddRawContent(aContent) 原样放入标记；ClearContent 清空主区域。

外壳

Fluid 切换全宽容器，FooterText 添加居中页脚，LayoutID 设置包装器的元素 id。

暗黑模式

DarkMode 注入暗黑主题样式表，为外壳内的卡片、表格、表单、导航和列表组重新着色。

间距与强调色

MainPadding、MainMinHeight 和 SectionMarginBottom 设置主区域的尺寸；SectionTitleBorderColorStyle（一个 TsgcHTMLColor）为每个内容区的标题下划线着色。

输出

HTML 返回完整外壳 — 固定侧边栏、主内容和页脚 — 可直接提供服务，或将其赋给页面模板的 BodyContent。

资源

继续探索

	所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。	打开
	下载免费试用版30 天试用版附带 60.HTML 演示项目。	打开
	价格Single、Team 和 Site 授权，均含完整源代码。	打开

DashboardLayout