Auf einen Blick

TsgcHTMLComponent_NavBar

Eine Navigationskomponente, die ein Bootstrap-5-<nav class="navbar"> mit Marke, responsivem Toggler und einer einklappbaren Liste von Links ausgibt. Lege die Marke fest, füge Einträge hinzu und lies dann die Eigenschaft HTML.

Komponentenklasse

TsgcHTMLComponent_NavBar

Erzeugt

Bootstrap-5-NavBar-Markup

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Links hinzufügen, rendern

Setze Brand, füge einen oder mehrere Einträge zu Items hinzu und lies dann HTML (oder übergib es an eine TsgcHTMLTemplate_Bootstrap-Seite).

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"> ...

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die du am häufigsten brauchst.

Marke

Brand legt den links angezeigten Markentext fest; BrandHref ist der Link, auf den er verweist (standardmäßig #).

Links

Items.Add gibt ein TsgcHTMLNavItem zurück; setze dessen Text, Href, Active und Disabled, um die einklappbare Linkliste aufzubauen.

Theme

Theme wählt ntDark (Standard) oder ntLight und ordnet sie dem dunklen/hellen Bootstrap-NavBar-Hintergrund zu.

Responsiver Breakpoint

Expand bestimmt, wann der Toggler einklappt: neSmall, neMedium, neLarge (Standard), neXLarge oder neAlways.

Layout

Fluid schaltet zwischen container-fluid und container um; NavBarID setzt die Element-ID; CSSClass hängt zusätzliche Klassen an.

Ausgabe

HTML gibt das vollständige <nav class="navbar"> mit Marke, Toggler und einklappbarer Navigation zurück — liefere es aus oder weise es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchstöbere die vollständige Funktionsmatrix mit über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die Demo-Projekte unter 60.HTML.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

NavBar