한눈에 보기

TsgcHTMLComponent_NavBar

브랜드, 반응형 토글러 및 접을 수 있는 링크 목록을 갖춘 Bootstrap 5 <nav class="navbar">를 내보내는 내비게이션 컴포넌트입니다. 브랜드를 설정하고, 항목을 추가한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_NavBar

렌더링

Bootstrap 5 navbar 마크업

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 링크를 추가하고, 렌더링하기

Brand를 설정하고, 하나 이상의 항목을 Items에 추가한 다음, HTML을 읽습니다(또는 TsgcHTMLTemplate_Bootstrap 페이지에 넣습니다).

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;

// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}

using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...

레퍼런스

주요 속성 및 메서드

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

브랜드

Brand는 왼쪽에 표시되는 브랜드 텍스트를 설정합니다. BrandHref는 그것이 가리키는 링크입니다(기본값은 #).

링크

Items.Add는 TsgcHTMLNavItem을 반환합니다. 접을 수 있는 링크 목록을 구성하려면 그 Text, Href, Active 및 Disabled를 설정하십시오.

테마

Theme은 Bootstrap 다크/라이트 navbar 배경에 매핑되는 ntDark(기본값) 또는 ntLight를 선택합니다.

반응형 중단점

Expand는 토글러가 접히는 시점을 선택합니다: neSmall, neMedium, neLarge(기본값), neXLarge 또는 neAlways.

레이아웃

Fluid는 container-fluid 대 container를 토글합니다. NavBarID는 요소 id를 설정하며, CSSClass는 추가 클래스를 덧붙입니다.

출력

HTML은 브랜드, 토글러 및 접을 수 있는 내비를 갖춘 전체 <nav class="navbar">를 반환합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

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

NavBar