At a glance

TsgcHTMLComponent_Tabs

A navigation component that emits a Bootstrap tab nav plus a tab-content block of panes wired with data-bs-toggle="tab". Add items with their title and content, then read the HTML property.

Component class

TsgcHTMLComponent_Tabs

Renders

Bootstrap tabs + content panes

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add panes, render it

Pick a Style, push items with a Title and Content (flag one Active), then read 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

Reference

Key properties & methods

The members you reach for most often.

Items

Items.Add returns a TsgcHTMLTabItem; set Title, Content (the pane markup) and flag one Active so a pane shows on load.

Style

Style selects tsTab (default), tsPill or tsUnderline, mapping to nav-tabs, nav-pills or nav-underline.

Layout

Vertical lays the nav down the side; Fill and Justify spread the tab buttons across the available width.

State

Per item, Disabled greys a tab out, and TabID overrides the generated pane id (otherwise it is derived from TabsID).

Identity

TabsID (default sgcTabs) prefixes the generated tab and pane ids that wire each button to its pane.

Output

HTML returns the nav list plus the tab-content panes — serve it, or assign it to a page template's BodyContent.

Resources

Keep exploring

	All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

Tabs