한눈에 보기

TsgcHTMLComponent_Tabs

Bootstrap 탭 내비와 data-bs-toggle="tab"로 연결된 창의 tab-content 블록을 내보내는 내비게이션 컴포넌트입니다. 제목과 콘텐츠가 있는 항목을 추가한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_Tabs

렌더링

Bootstrap 탭 + 콘텐츠 창

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

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

Style을 선택하고, Title과 Content가 있는 항목을 추가하고(하나에 Active 표시), HTML을 읽습니다.

uses
  sgcHTML_Component_Tabs;

var
  oTabs: TsgcHTMLComponent_Tabs;
begin
  oTabs := TsgcHTMLComponent_Tabs.Create(nil);
  try
    oTabs.Style := tsTab;
    oTabs.Fill := True;

    with oTabs.Items.Add do begin Title := 'Overview'; Content := '<p>Welcome.</p>'; Active := True; end;
    with oTabs.Items.Add do begin Title := 'Details'; Content := '<p>The details.</p>'; end;
    with oTabs.Items.Add do begin Title := 'Settings'; Content := '<p>Settings.</p>'; end;

    WebModule.Response := oTabs.HTML;   // nav-tabs + tab-content
  finally
    oTabs.Free;
  end;
end;

// includes: sgcHTML_Component_Tabs.hpp

TsgcHTMLComponent_Tabs *oTabs = new TsgcHTMLComponent_Tabs(NULL);
try
{
  oTabs->Style = tsTab;
  oTabs->Fill = true;

  TsgcHTMLTabItem *oItem = oTabs->Items->Add();
  oItem->Title = "Overview"; oItem->Content = "<p>Welcome.</p>"; oItem->Active = true;
  oItem = oTabs->Items->Add(); oItem->Title = "Details"; oItem->Content = "<p>The details.</p>";
  oItem = oTabs->Items->Add(); oItem->Title = "Settings"; oItem->Content = "<p>Settings.</p>";

  String html = oTabs->HTML;   // nav-tabs + tab-content
}
__finally
{
  delete oTabs;
}

using esegece.sgcWebSockets;

var tabs = new TsgcHTMLComponent_Tabs();
tabs.Style = TsgcHTMLTabStyle.tsTab;
tabs.Fill = true;

var item = tabs.Items.Add();
item.Title = "Overview"; item.Content = "<p>Welcome.</p>"; item.Active = true;
item = tabs.Items.Add(); item.Title = "Details"; item.Content = "<p>The details.</p>";
item = tabs.Items.Add(); item.Title = "Settings"; item.Content = "<p>Settings.</p>";

string html = tabs.HTML;   // nav-tabs + tab-content

레퍼런스

주요 속성 및 메서드

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

Items

Items.Add는 TsgcHTMLTabItem을 반환합니다. Title, Content(창 마크업)를 설정하고, 로드 시 창이 표시되도록 하나에 Active를 표시하십시오.

스타일

Style은 nav-tabs, nav-pills 또는 nav-underline에 매핑되는 tsTab(기본값), tsPill 또는 tsUnderline을 선택합니다.

레이아웃

Vertical은 내비를 측면에 세로로 배치합니다. Fill과 Justify는 탭 버튼을 사용 가능한 너비 전체에 펼칩니다.

상태

항목별로, Disabled는 탭을 회색으로 처리하고, TabID는 생성된 창 id를 재정의합니다(그렇지 않으면 TabsID에서 파생됨).

식별

TabsID(기본값 sgcTabs)는 각 버튼을 그 창에 연결하는, 생성된 탭 및 창 id에 접두사를 붙입니다.

출력

HTML은 내비 목록과 tab-content 창을 반환합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

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

Tabs