In sintesi

TsgcHTMLComponent_Tabs

Un componente di navigazione che emette una nav di schede Bootstrap più un blocco tab-content di riquadri collegati con data-bs-toggle="tab". Aggiungi gli elementi con il loro titolo e contenuto, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Tabs

Renderizza

Bootstrap tabs + content panes

Famiglia

Navigazione e Struttura

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Crealo, aggiungi i riquadri, renderizzalo

Scegli uno Style, inserisci gli elementi con un Title e un Content (contrassegnane uno come Active), quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Items

Items.Add restituisce un TsgcHTMLTabItem; imposta Title, Content (il markup del riquadro) e contrassegnane uno come Active così un riquadro viene mostrato al caricamento.

Stile

Style seleziona tsTab (predefinito), tsPill o tsUnderline, corrispondenti a nav-tabs, nav-pills o nav-underline.

Layout

Vertical dispone la nav lateralmente; Fill e Justify distribuiscono i pulsanti delle schede lungo la larghezza disponibile.

Stato

Per ogni elemento, Disabled disattiva una scheda, e TabID sovrascrive l’id del riquadro generato (altrimenti deriva da TabsID).

Identità

TabsID (predefinito sgcTabs) fa da prefisso agli id generati di scheda e riquadro che collegano ogni pulsante al suo riquadro.

Output

HTML restituisce la lista nav più i riquadri tab-content — servilo, oppure assegnalo al BodyContent di un template di pagina.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

Tabs