Tabs Component — sgcHTML

W skrócie

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.

Klasa komponentu

TsgcHTMLComponent_Tabs

Renderuje

Bootstrap tabs + content panes

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

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.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Tabs