In één oogopslag

TsgcHTMLComponent_NavBar

Een navigatiecomponent dat een Bootstrap 5-<nav class="navbar"> uitstuurt met een merk, een responsieve toggler en een inklapbare lijst van links. Stel het merk in, voeg items toe en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_NavBar

Rendert

Bootstrap 5-navbar-markup

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg links toe, render hem

Stel Brand in, voeg een of meer items toe aan Items en lees dan HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Merk

Brand stelt de merktekst in die links wordt getoond; BrandHref is de link waarnaar het verwijst (standaard #).

Links

Items.Add retourneert een TsgcHTMLNavItem; stel zijn Text, Href, Active en Disabled in om de inklapbare linklijst te bouwen.

Thema

Theme kiest ntDark (standaard) of ntLight, gekoppeld aan de donkere/lichte Bootstrap-navbar-achtergrond.

Responsief breekpunt

Expand kiest wanneer de toggler inklapt: neSmall, neMedium, neLarge (standaard), neXLarge of neAlways.

Layout

Fluid schakelt tussen container-fluid en container; NavBarID stelt de element-id in; CSSClass voegt extra classes toe.

Uitvoer

HTML retourneert de volledige <nav class="navbar"> met merk, toggler en inklapbare nav — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

NavBar