Composant NavBar — sgcHTML

En bref

TsgcHTMLComponent_NavBar

Un composant de navigation qui émet un Bootstrap 5 <nav class="navbar"> avec une marque, un bouton bascule responsive et une liste de liens repliable. Définis la marque, ajoute des éléments, puis lis la propriété HTML.

Classe du composant

TsgcHTMLComponent_NavBar

Génère

Balisage navbar Bootstrap 5

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

DÉMARRAGE RAPIDE

Crée-le, ajoute des liens, génère-le

Définis Brand, pousse un ou plusieurs éléments dans Items, puis lis HTML (ou place-le dans une page TsgcHTMLTemplate_Bootstrap).

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;

// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}

using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...

Référence

Propriétés et méthodes clés

Les membres que tu utilises le plus souvent.

Brand

Brand définit le texte de la marque affiché à gauche ; BrandHref est le lien vers lequel il pointe (par défaut #).

Liens

Items.Add renvoie un TsgcHTMLNavItem ; définis ses Text, Href, Active et Disabled pour construire la liste de liens repliable.

Thème

Theme choisit ntDark (par défaut) ou ntLight, correspondant à l'arrière-plan navbar sombre/clair de Bootstrap.

Point de rupture responsive

Expand choisit quand le bouton bascule se replie : neSmall, neMedium, neLarge (par défaut), neXLarge ou neAlways.

Mise en page

Fluid bascule entre container-fluid et container ; NavBarID définit l'id de l'élément ; CSSClass ajoute des classes supplémentaires.

Sortie

HTML renvoie le <nav class="navbar"> complet avec la marque, le bouton bascule et la navigation repliable — sers-le, ou affecte-le au BodyContent d'un modèle de page.

RESSOURCES

Continuer l'exploration

	Tous les composants sgcHTMLParcours la matrice complète de plus de 60 composants.	Ouvrir
	Télécharger l'essai gratuitL'essai de 30 jours inclut les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec le code source complet.	Ouvrir

NavBar