한눈에 보기

TsgcHTMLComponent_Sidebar

선택적 브랜드, 내비 알약 링크, 헤더, 구분선 및 푸터를 갖춘 Bootstrap 5 세로형 사이드바를 내보내는 내비게이션 컴포넌트입니다. 항목을 추가한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_Sidebar

렌더링

Bootstrap 5 사이드바 마크업

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 항목을 추가하고, 렌더링하기

Brand와 Width를 설정하고, 항목(링크, 헤더, 구분선)을 Items에 추가한 다음, HTML을 읽습니다.

uses
  sgcHTML_Component_Sidebar;

var
  oSidebar: TsgcHTMLComponent_Sidebar;
begin
  oSidebar := TsgcHTMLComponent_Sidebar.Create(nil);
  try
    oSidebar.Brand := 'Dashboard';
    oSidebar.Width := '240px';
    oSidebar.Dark := True;

    with oSidebar.Items.Add do begin Text := 'Main'; Header := True; end;
    with oSidebar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oSidebar.Items.Add do begin Text := 'Reports'; Href := '/reports'; end;
    oSidebar.Items.Add.Divider := True;
    with oSidebar.Items.Add do begin Text := 'Settings'; Href := '/settings'; end;

    oSidebar.FooterText := 'v2.0';

    WebModule.Response := oSidebar.HTML;   // vertical <div> nav
  finally
    oSidebar.Free;
  end;
end;

// includes: sgcHTML_Component_Sidebar.hpp

TsgcHTMLComponent_Sidebar *oSidebar = new TsgcHTMLComponent_Sidebar(NULL);
try
{
  oSidebar->Brand = "Dashboard";
  oSidebar->Width = "240px";
  oSidebar->Dark = true;

  TsgcHTMLSidebarItem *oItem = oSidebar->Items->Add();
  oItem->Text = "Main"; oItem->Header = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Reports"; oItem->Href = "/reports";
  oSidebar->Items->Add()->Divider = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Settings"; oItem->Href = "/settings";

  oSidebar->FooterText = "v2.0";

  String html = oSidebar->HTML;   // vertical <div> nav
}
__finally
{
  delete oSidebar;
}

using esegece.sgcWebSockets;

var sidebar = new TsgcHTMLComponent_Sidebar();
sidebar.Brand = "Dashboard";
sidebar.Width = "240px";
sidebar.Dark = true;

var item = sidebar.Items.Add();
item.Text = "Main"; item.Header = true;
item = sidebar.Items.Add(); item.Text = "Home"; item.Href = "/"; item.Active = true;
item = sidebar.Items.Add(); item.Text = "Reports"; item.Href = "/reports";
sidebar.Items.Add().Divider = true;
item = sidebar.Items.Add(); item.Text = "Settings"; item.Href = "/settings";

sidebar.FooterText = "v2.0";

string html = sidebar.HTML;   // vertical <div> nav

레퍼런스

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

브랜드

Brand는 패널 상단에 표시되는 제목을 설정합니다. BrandHref는 그것이 가리키는 링크입니다(기본값은 #).

Items

Items.Add는 TsgcHTMLSidebarItem을 반환합니다. 링크에는 Text, Href, Icon 및 Active를 설정하거나, 섹션 제목 또는 구분선에는 Header / Divider를 표시하십시오.

테마

Dark(기본값 True)는 다크 및 라이트 배경과 일치하는 링크 텍스트 색상 사이를 전환합니다.

레이아웃

Width는 패널 너비를 설정합니다(기본값 250px). Fixed는 이를 왼쪽 가장자리에 고정합니다. SidebarID와 CSSClass는 id와 추가 클래스를 설정합니다.

푸터

FooterHTML은 구분선 아래에 원시 마크업을 주입하거나, HTML이 설정되지 않은 경우 FooterText가 음소거된 캡션을 렌더링합니다.

출력

HTML은 전체 세로형 <div> 내비게이션을 반환합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기

Sidebar