Componente NavBar — sgcHTML

In breve

TsgcHTMLComponent_NavBar

Un componente di navigazione che emette un Bootstrap 5 <nav class="navbar"> con un brand, un toggler responsive e una lista comprimibile di link. Imposta il brand, aggiungi gli elementi, poi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_NavBar

Genera

Markup navbar Bootstrap 5

Famiglia

Navigazione e Struttura

Linguaggi

Delphi, C++ Builder, .NET

Guida rapida

Crealo, aggiungi i link, generalo

Imposta Brand, inserisci uno o più elementi in Items, poi leggi HTML (oppure inseriscilo in una pagina 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"> ...

Riferimento

Proprietà e metodi principali

I membri che userai più spesso.

Brand

Brand imposta il testo del brand mostrato a sinistra; BrandHref è il link a cui punta (predefinito #).

Link

Items.Add restituisce un TsgcHTMLNavItem; imposta Text, Href, Active e Disabled per costruire la lista comprimibile di link.

Tema

Theme sceglie ntDark (predefinito) o ntLight, mappando sullo sfondo navbar scuro/chiaro di Bootstrap.

Breakpoint responsive

Expand sceglie quando il toggler si comprime: neSmall, neMedium, neLarge (predefinito), neXLarge o neAlways.

Layout

Fluid alterna container-fluid e container; NavBarID imposta l'id dell'elemento; CSSClass aggiunge classi extra.

Output

HTML restituisce l'intero <nav class="navbar"> con brand, toggler e navigazione comprimibile — servilo, oppure assegnalo al BodyContent di un template di pagina.

Risorse

Continua a esplorare

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

NavBar