Auf einen Blick

TsgcHTMLComponent_Tabs

Eine Navigationskomponente, die eine Bootstrap-Tab-Navigation plus einen tab-content-Block aus Bereichen ausgibt, die mit data-bs-toggle="tab" verknüpft sind. Fügen Sie Elemente mit Titel und Inhalt hinzu und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Tabs

Rendert

Bootstrap-Tabs + Inhaltsbereiche

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Bereiche hinzufügen, rendern

Wählen Sie einen Style, fügen Sie Elemente mit Title und Content hinzu (markieren Sie eines als Active) und lesen Sie dann 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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Items

Items.Add gibt ein TsgcHTMLTabItem zurück; setzen Sie Title, Content (das Bereichs-Markup) und markieren Sie eines als Active, damit ein Bereich beim Laden angezeigt wird.

Stil

Style wählt tsTab (Standard), tsPill oder tsUnderline und bildet auf nav-tabs, nav-pills oder nav-underline ab.

Layout

Vertical ordnet die Navigation seitlich an; Fill und Justify verteilen die Tab-Schaltflächen über die verfügbare Breite.

Zustand

Pro Element graut Disabled einen Tab aus, und TabID überschreibt die generierte Bereichs-id (andernfalls wird sie aus TabsID abgeleitet).

Identität

TabsID (Standard sgcTabs) stellt den generierten Tab- und Bereichs-ids ein Präfix voran, das jede Schaltfläche mit ihrem Bereich verknüpft.

Ausgabe

HTML gibt die Navigationsliste plus die tab-content-Bereiche zurück — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

Tabs