In één oogopslag

TsgcHTMLComponent_Tabs

Een navigatiecomponent dat een Bootstrap-tabnav uitstuurt plus een tab-content-blok van panelen, gekoppeld met data-bs-toggle="tab". Voeg items toe met hun titel en inhoud en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Tabs

Rendert

Bootstrap-tabs + inhoudspanelen

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg panelen toe, render hem

Kies een Style, voeg items toe met een Title en Content (markeer er één Active) en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items.Add retourneert een TsgcHTMLTabItem; stel Title, Content (de paneelmarkup) in en markeer er één Active zodat een paneel bij het laden wordt getoond.

Stijl

Style selecteert tsTab (standaard), tsPill of tsUnderline, gekoppeld aan nav-tabs, nav-pills of nav-underline.

Layout

Vertical plaatst de nav langs de zijkant; Fill en Justify spreiden de tabknoppen over de beschikbare breedte.

Status

Per item maakt Disabled een tab grijs, en TabID overschrijft de gegenereerde paneel-id (anders wordt die afgeleid van TabsID).

Identiteit

TabsID (standaard sgcTabs) voorvoegt de gegenereerde tab- en paneel-id's die elke knop aan zijn paneel koppelen.

Uitvoer

HTML retourneert de navlijst plus de tab-content-panelen — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Tabs