Componente NavBar — sgcHTML

De un vistazo

TsgcHTMLComponent_NavBar

Un componente de navegación que emite un <nav class="navbar"> de Bootstrap 5 con una marca, un botón de alternancia responsivo y una lista plegable de enlaces. Define la marca, añade elementos y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_NavBar

Genera

Marcado de navbar de Bootstrap 5

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade enlaces, renderízalo

Define Brand, añade uno o más elementos a Items y luego lee HTML (o insértalo en una página 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"> ...

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Marca

Brand define el texto de la marca que se muestra a la izquierda; BrandHref es el enlace al que apunta (por defecto #).

Enlaces

Items.Add devuelve un TsgcHTMLNavItem; define su Text, Href, Active y Disabled para construir la lista de enlaces plegable.

Tema

Theme elige ntDark (por defecto) o ntLight, que se corresponden con el fondo de navbar oscuro/claro de Bootstrap.

Punto de ruptura responsivo

Expand elige cuándo se pliega el botón de alternancia: neSmall, neMedium, neLarge (por defecto), neXLarge o neAlways.

Diseño

Fluid alterna entre container-fluid y container; NavBarID define el id del elemento; CSSClass añade clases adicionales.

Salida

HTML devuelve el <nav class="navbar"> completo con la marca, el botón de alternancia y la navegación plegable — sírvelo o asígnalo al BodyContent de una plantilla de página.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

NavBar