En bref

TsgcHTMLComponent_Tabs

Un composant de navigation qui émet une nav d'onglets Bootstrap ainsi qu'un bloc tab-content de volets câblés avec data-bs-toggle="tab". Ajoutez des éléments avec leur titre et leur contenu, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Tabs

Produit

Onglets Bootstrap + volets de contenu

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-les, ajoutez des volets, affichez-les

Choisissez un Style, ajoutez des éléments avec un Title et un Content (marquez-en un Active), puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Items

Items.Add renvoie un TsgcHTMLTabItem ; définissez Title, Content (le balisage du volet) et marquez-en un Active pour qu'un volet s'affiche au chargement.

Style

Style sélectionne tsTab (par défaut), tsPill ou tsUnderline, correspondant à nav-tabs, nav-pills ou nav-underline.

Mise en page

Vertical dispose la nav sur le côté ; Fill et Justify répartissent les boutons d'onglet sur la largeur disponible.

État

Par élément, Disabled grise un onglet, et TabID remplace l'identifiant de volet généré (sinon il est dérivé de TabsID).

Identité

TabsID (par défaut sgcTabs) préfixe les identifiants d'onglet et de volet générés qui relient chaque bouton à son volet.

Sortie

HTML renvoie la liste de navigation plus les volets tab-content — servez-le, ou affectez-le au BodyContent d'un modèle de page.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

Tabs