한눈에 보기

TsgcHTMLDashboardLayout

완전한 대시보드 셸을 내보내는 레이아웃 컴포넌트입니다: 왼쪽의 고정 사이드바와 제목이 있는 섹션으로 구성된 패딩된 메인 영역. Sidebar를 구성하고, 섹션을 추가한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLDashboardLayout

렌더링

대시보드 셸(고정 사이드바 + 콘텐츠)

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 셸을 구성하고, 렌더링하기

읽기 전용 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